单击按钮后重新加载数据表

Question

我敢肯定有几种（更好的）方法可以做到这一点，但是我无法获得任何工作方法。 我试图让数据表在单击按钮时加载新数据（来自不同的数据源）。

这是我所拥有的：

$(document).ready(function() {

  $('#datatable2').dataTable( {

    "ajax": {
      "url":"simple4.php",
      "type":"GET"
    }  ,

    "paging":        true, 
    "pageLength": 20,
    "order": [[ 2, "asc" ]],
    "aoColumns": [
      { "bSortable": false, "width": "25%"  },
      { "bSortable": true, "width": "30%"  },
      { "bSortable": true, "width": "15%"  },
      { "bSortable": true, "width": "15%"  },

      { "bSortable": true, "width": "15%"  },
      { "bSortable": false, "width": "0%", "visible":false  },

    ],
  });

  $( "#option2" ).click(function() {
    table.ajax.url( 'simple3.php' ).load();
  }); 
});

初始表（来自simple4.php）可以正常加载。 我希望单击按钮时可以更改它（在本例中为id = option2），但是单击按钮时什么也没有发生。

以防万一，这是按钮代码，以防万一我遗漏了一些明显的东西：

<label class="btn btn-default">
<input type="radio" name="options" id="option2" value="1" autocomplete="off"> Compare 1 and 2
</label>

不知道是什么问题。 任何见解都会有所帮助。

更新：请参阅下面的问题说明答案。 我没有做的一件事，显然是在使“数据表”与“数据表”相对应，这是一个很大的不同。 您需要大写字母D和大写字母T。这是现在可以使用的固定代码：

$(document).ready(function() {
var table = $("#datatable2").DataTable({

  "ajax": {
    "url":"simple3.php",
    "type":"GET"
}  ,

   "paging":        true, 
   "pageLength": 20,
"order": [[ 2, "asc" ]],
  "aoColumns": [
  { "bSortable": false, "width": "25%"  },
  { "bSortable": true, "width": "30%"  },
 { "bSortable": true, "width": "15%"  },
  { "bSortable": true, "width": "15%"  },

   { "bSortable": true, "width": "15%"  },
  { "bSortable": false, "width": "0%", "visible":false  },

  ],

});
$( "#option2" ).click(function() {
table.ajax.url( "simple4.php" ).load();
});
});

还有一件事...我单击单选按钮时应该触发的功能不起作用。 不得不改变这一点：

$( "#option2" ).click(function() {
table.ajax.url( "simple4.php" ).load();
});

对此：

$('input[id=option2]').change(function(){
table.ajax.url( "simple4.php" ).load();
});

Answer 1

我现在无法尝试，但我认为它可以工作：

var table = $('#datatable2').dataTable({...});

$( "#option2" ).click(function() {
    table.ajax.url( 'simple3.php' ).load();
});

您没有设置var table = ...，所以当您调用table.ajax ... table var不存在时

Answer 2

首先，正如其他人所说，未设置变量“表”。

第二，当你打电话

var table = $('#datatable2').dataTable({.....}) 

您将返回一个无法访问任何DataTables API的jQuery对象

要获取DataTables API实例，您需要进行如下调用：

var table = $('#datatable2').DataTable({....});

假设您的网址返回的数据格式正确，这应该可以工作。

资料来源： https : //datatables.net/faqs/#api