DataTables警告:表id=example -无法重新初始化DataTable - jQuery
在我的项目中，我从服务器端将数据加载到数据表中。First load运行良好。但是，当我更改<select> <option>值时，它会给我一个错误。
我有一个<select> <option>面板。因此，一旦我更改了选项，我就需要删除当前内容并将不同的内容加载到表中。我正在从ajax调用中获取数据，并将其加载到表中。当我第二次更改选项时，它给出了这个错误。
DataTables警告:表id=example -无法重新初始化DataTable。有关此错误的更多信息，请参阅http://datatables.net/tn/3
我检查了给出的URL，但没有适合我的声音。
这是我的HTML，
<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%" style="background:#f3f3f3">
<thead>
<tr>
<th><div class="heading">Title 01</div></th>
<th><div class="heading">Title 02</div></th>
<th><div class="heading">Title 03</div></th>
<th><div class="heading">Title 04</div></th>
<th><div class="heading">Title 06</div></th>
<th><div class="heading">Title 07</div></th>
</tr>
</thead>
<tbody></tbody>
</table>下面是选择选项下拉列表
<select name="exampleSelect" id="exampleSelect" class="exampleSelect">
<option id="exam1">value</option>
<option id="exam2">value</option>
<option id="exam3">value</option>
<option id="exam4">value</option>
<option id="exam5">value</option>
<option id="exam6">value</option>
<option id="exam7">value</option>
</select>这是我的更改时函数，
$('select#exampleSelect').on('change', function() {
var sId = $(this).children(":selected").attr('id');
loadedData(sId);
});下面是我的loadedData函数
function loadedData(sId) {
var table = $('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "ajaxdata.json",
"type": "POST"
},
"sScrollY": "300px",
"scrollX":true,
"paging": false,
"bFilter": false,
"bInfo": false,
"searching": false,
"bSort" : false,
"fixedColumns": true
});
}在这里，根据"sId"，加载数据正在改变
这是我的JSON数据，
{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
["Airi", "Satou", "Accountant", "Tokyo", "28th Nov 08", "$162,700"],
["Angelica", "Ramos", "Chief Executive Officer (CEO)", "London", "9th Oct 09", "$1,200,000"],
["Ashton", "Cox", "Junior Technical Author", "San Francisco", "12th Jan 09", "$86,000"],
["Bradley", "Greer", "Software Engineer", "London", "13th Oct 12", "$132,000"],
["Brenden", "Wagner", "Software Engineer", "San Francisco", "7th Jun 11", "$206,850"],
["Brielle", "Williamson", "Integration Specialist", "New York", "2nd Dec 12", "$372,000"]
]
}我需要根据select option变更值将相关数据集追加到tbody中。
有没有人有解决这个问题的经验？
回答 2
Stack Overflow用户
发布于 2015-12-16 17:03:50
与尝试重新初始化datatable不同，您始终可以在ajax请求中发送一个参数，并强制datatable按需刷新数据
因此，您的datatable初始化代码将类似于以下代码。
var table = $('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "ajaxdata.json",
"type": "POST",
"data": function ( d ) {
d.filtervalue = $(this).children(":selected").attr('id'); // Ofcourse you can change this parametername as you want or add more parameters.
}
},
"sScrollY": "300px",
"scrollX":true,
"paging": false,
"bFilter": false,
"bInfo": false,
"searching": false,
"bSort" : false,
"fixedColumns": true
});您的select change事件如下所示。
$('select#exampleSelect').on('change', function() {
// Make sure that `table` variable is available inside your change method
table.ajax.reload();
});Stack Overflow用户
发布于 2015-12-16 17:09:24
它显示这条消息是因为它试图初始化一个数据表，而该表已经有一个数据表。
您可以为初始化设置一个选项，以便在数据表已经存在时将其销毁(docs)：
function loadedData(sId) {
var table = $('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "ajaxdata.json",
"type": "POST"
},
"sScrollY": "300px",
"scrollX":true,
"paging": false,
"bFilter": false,
"bInfo": false,
"searching": false,
"bSort" : false,
"fixedColumns": true,
"destroy": true
});
}但在我看来，如果能够做到这一点，最好使用datatables api并更改ajax源代码。您可以使用@Cerlin Boss‘answer这样的参数，或者如果您想要更改url，则datatables具有ajax.url()方法(docs。假设您已经在其他地方初始化表，并将其保存在table变量中：
$('select#exampleSelect').on('change', function() {
var sId = $(this).children(":selected").attr('id');
table.ajax.url( 'newData.json' ).load();
});https://stackoverflow.com/questions/34307221
复制相似问题
腾讯云开发者
