javascript 单击按钮后重新加载数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26937013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reload dataTables after button click
提问by jonmrich
I'm sure there are a few (better) ways to do this, but I can't get any way to work. I'm trying to have datatables load new data (from different data source) when a button is clicked.
我确信有一些（更好的）方法可以做到这一点，但我无法找到任何工作方式。当单击按钮时，我试图让数据表加载新数据（来自不同的数据源）。
Here's what I have:
这是我所拥有的：
$(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();
});
});
The initial table (from simple4.php) loads fine. I'd like it to change when I click on a button (with id=option2 in this case), but nothing happens when I click the button.
初始表（来自 simple4.php）加载正常。我希望当我点击一个按钮时它会改变（在这种情况下使用 id=option2），但是当我点击按钮时没有任何反应。
Just in case, here's the button code in case I'm missing something obvious:
以防万一，这里是按钮代码，以防我遗漏了一些明显的东西：
<label class="btn btn-default">
<input type="radio" name="options" id="option2" value="1" autocomplete="off"> Compare 1 and 2
</label>
Not sure what the issue is. Any insight would be helpful.
不确定是什么问题。任何见解都会有所帮助。
UPDATE: see answers below explanation of the issue. One thing I didn't do, which apparently makes a major difference is using "dataTable" versus "DataTable". You need a capital D and capital T. Here's the fixed code that's working now:
更新：请参阅下面对问题的解释的答案。我没有做的一件事是使用“dataTable”与“DataTable”，这显然有很大的不同。你需要一个大写的 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();
});
});
One more thing...my function that was supposed to fire when I clicked on my radio button wasn't working. Had to change from this:
还有一件事......当我点击我的单选按钮时应该触发的功能不起作用。不得不从这里改变：
$( "#option2" ).click(function() {
table.ajax.url( "simple4.php" ).load();
});
To this:
对此：
$('input[id=option2]').change(function(){
table.ajax.url( "simple4.php" ).load();
});
回答by Thiago Cordeiro
I can't try this now, but I think it gonna work:
我现在无法尝试，但我认为它会起作用：
var table = $('#datatable2').dataTable({...});
$( "#option2" ).click(function() {
table.ajax.url( 'simple3.php' ).load();
});
you are not setting var table = ... so when you call table.ajax... table var does not exists
你没有设置 var table = ... 所以当你调用 table.ajax ... table var 不存在
回答by Tony A
First, as the others have said the variable 'table' is not set.
首先，正如其他人所说，未设置变量“表”。
Second, when you call
二、当你打电话
var table = $('#datatable2').dataTable({.....})
You are returning a jQuery object that won't have access to any of the DataTables API
您正在返回一个无法访问任何 DataTables API 的 jQuery 对象
To get a DataTables API instance you need to make a call like this:
要获取 DataTables API 实例，您需要进行如下调用：
var table = $('#datatable2').DataTable({....});
This should work, assuming that your data returned by your url is properly formed.
这应该有效，假设您的 url 返回的数据格式正确。
Source: https://datatables.net/faqs/#api
