DataTables 警告:table id=example - 无法重新初始化 DataTable - jQuery
Posted
技术标签:
【中文标题】DataTables 警告:table id=example - 无法重新初始化 DataTable - jQuery【英文标题】:DataTables warning: table id=example - Cannot reinitialise DataTable - jQuery 【发布时间】:2016-03-22 07:20:35 【问题描述】:在我的项目中,我正在从服务器端将数据加载到数据表中。第一次加载工作正常。但是当我更改 <select> <option>
值时,它给了我一个错误。
我有一个<select> <option>
面板。因此,一旦我更改了选项,我需要删除当前内容并将不同的内容加载到表格中。我正在从 ajax 调用中获取数据并加载到表中。第二次更改选项时,它给了我这个错误。
DataTables 警告:table id=example - 无法重新初始化 DataTable。有关此错误的更多信息,请参阅http://datatables.net/tn/3
我检查了给定的 URL,但对我来说没有很好的声音。
这是我的 html,
<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" 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"]
]
我需要根据选择选项的变化值将相关数据集附加到tbody
。
有没有人有这方面的经验来解决这个问题..?
【问题讨论】:
对于所有sId
,您都在查询相同的服务,对吗?
@Cerlin Boss 是的,但数据不同。
附带说明,请尝试仅在选择时使用 id,例如$('#exampleSelect').on
【参考方案1】:
您可以随时在 ajax 请求中发送参数并强制数据表按需刷新数据,而不是尝试重新初始化数据表
因此,您的数据表初始化代码将类似于以下代码。
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#exampleSelect').on('change', function()
// Make sure that `table` variable is available inside your change method
table.ajax.reload();
);
【讨论】:
我更改了函数并在函数内部添加了选择事件。但是当我改变选项值时,新的数据集并没有改变。实际上,我在这里通过 URL 传递 sId 值来生成新的 JSON 数据集。 有请求发送吗?请检查您的网络标签。还要检查参数是否正确传递 一旦数据加载,当我更改选项值时 ajax 调用不再调用 控制台有错误吗?尝试table.fnDraw()
而不是table.ajax.reload();
将选择选项放入函数后,控制台中没有错误。否则显示表未定义。这就是我得到的全部【参考方案2】:
它显示该消息是因为它正在尝试初始化一个数据表,而该表已经有一个数据表。
如果数据表已经存在,您可以设置初始化选项以销毁数据表 (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 数据表有一个 ajax.url()
方法 (docs)。假设您已在别处初始化表并将其保存在 table
变量中:
$('select#exampleSelect').on('change', function()
var sId = $(this).children(":selected").attr('id');
table.ajax.url( 'newData.json' ).load();
);
【讨论】:
以上是关于DataTables 警告:table id=example - 无法重新初始化 DataTable - jQuery的主要内容,如果未能解决你的问题,请参考以下文章
DataTables 警告(表 id = 'table-filter'):从数据源请求未知参数 '0' 用于数据表中的第 0 行错误
DataTables 警告:table id=example - 无法重新初始化 DataTable - jQuery
ajax datatable - DataTables警告:table id = example - 无法重新初始化DataTable
DataTables 警告:表 id=id - 请求行 row-index、列 column-index 的未知参数“parameter”
DataTables warning: table id=DataTables_Table_0 - Requested unknown paramete
DataTables warning: TABLE id=DataTables_Table_0 - Requested UNKNOWN parameter '7' FOR ROW 0(