場(chǎng)景

在頁(yè)面中有一個(gè)下拉框select，在select的change事件中，每此要根據(jù)選擇的值的

不同進(jìn)而在dataTables中顯示不一樣的值。

錯(cuò)誤提示如圖：

錯(cuò)誤代碼如下：

$(document).ready(function() {//選擇退貨方后退貨目的地綁定聯(lián)動(dòng)$("#businessInitiator").bind("change", function () {//獲取選中的option的value值var selected = $("#businessInitiator option:selected").val();//獲取退貨目的地Input對(duì)象var destination = $("#destination");switch (selected){case '原料立庫(kù)':destination.val("原料立庫(kù)退貨點(diǎn)")break;case '清潔車間':destination.val("清潔車間退貨點(diǎn)")break;case '正極車間':destination.val("正極車間退貨點(diǎn)")break;case '負(fù)極車間':destination.val("負(fù)極車間退貨點(diǎn)")break;default:destination.val("其它退貨點(diǎn)")}//退貨目的地聯(lián)動(dòng)完成// DataTable初始化var t = $('#example').DataTable({"language": {"processing": "處理中...","lengthMenu": "顯示 _MENU_ 項(xiàng)結(jié)果","zeroRecords": "沒有匹配結(jié)果","info": "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)","infoEmpty": "顯示第 0 至 0 項(xiàng)結(jié)果，共 0 項(xiàng)","infoFiltered": "(由 _MAX_ 項(xiàng)結(jié)果過濾)","infoPostFix": "","search": "搜索:","searchPlaceholder": "搜索...","url": "","emptyTable": "表中數(shù)據(jù)為空","loadingRecords": "載入中...","infoThousands": ",","paginate": {"first": "首頁(yè)","previous": "上頁(yè)","next": "下頁(yè)","last": "末頁(yè)"},"aria": {paginate: {first: '首頁(yè)',previous: '上頁(yè)',next: '下頁(yè)',last: '末頁(yè)'},"sortAscending": ": 以升序排列此列","sortDescending": ": 以降序排列此列"},"decimal": "-","thousands": "."},"processing": true,"searching" : false,"pageLength": 100,"serverSide": true,"columnDefs": [ {"searchable": false,"orderable": false,"targets": "_all",}],"dom": '<"top">rt<"bottom"flpi><"clear">',columns: [{ data: 'id' ,"orderable" : false},{ data: 'goodsLocationNumber' },{ data: 'locationTypeName' ,"orderable" : false},{ data: 'saveMaterialTypeName' ,"orderable" : false},{ data: 'materielStatusName',"orderable" : false},{ data: 'shelveName' ,"orderable" : false},{ data: 'remark',"orderable" : false }],columnDefs: [{//?? 指定第1列，從0開始，0表示第一列，1表示第二列……"targets": 0,"bSortable": false,"render": function(data, type, row, meta) {if (row.isSelected == 1){return '<input type="checkbox" class="checkchild" onclick="childClick(this)" checked="checked" value="' + row.id + '" />'}return '<input type="checkbox" class="checkchild" onclick="childClick(this)" value="' + row.id + '" />'}}],"ajax": function (data, callback, setting) {data.editActionId = $("#refundOrderId").val();$.ajax({type: 'POST',url: "/busGoodsLocation/getRejectsLocationsList",cache: false,? //禁用緩存//async: true,data: JSON.stringify(data),? //傳入組裝的參數(shù)contentType: "application/json",dataType: "json",success: function (result) {callback(result);}})}});}); });

實(shí)現(xiàn)

根據(jù)錯(cuò)誤提示是不能初始化dataTable，即在同一個(gè)頁(yè)面中不能多次初始化DataTables。

解決，在每此的點(diǎn)擊事件中初始化之前先還原初始化。

?$("#example").dataTable().fnDestroy();//還原初始化了datatable

完整示例代碼：

$(document).ready(function() {//選擇退貨方后退貨目的地綁定聯(lián)動(dòng)$("#businessInitiator").bind("change", function () {//獲取選中的option的value值var selected = $("#businessInitiator option:selected").val();//獲取退貨目的地Input對(duì)象var destination = $("#destination");switch (selected){case '原料立庫(kù)':destination.val("原料立庫(kù)退貨點(diǎn)")break;case '清潔車間':destination.val("清潔車間退貨點(diǎn)")break;case '正極車間':destination.val("正極車間退貨點(diǎn)")break;case '負(fù)極車間':destination.val("負(fù)極車間退貨點(diǎn)")break;default:destination.val("其它退貨點(diǎn)")}//退貨目的地聯(lián)動(dòng)完成$("#example").dataTable().fnDestroy();//還原初始化了datatable// DataTable初始化var t = $('#example').DataTable({"language": {"processing": "處理中...","lengthMenu": "顯示 _MENU_ 項(xiàng)結(jié)果","zeroRecords": "沒有匹配結(jié)果","info": "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)","infoEmpty": "顯示第 0 至 0 項(xiàng)結(jié)果，共 0 項(xiàng)","infoFiltered": "(由 _MAX_ 項(xiàng)結(jié)果過濾)","infoPostFix": "","search": "搜索:","searchPlaceholder": "搜索...","url": "","emptyTable": "表中數(shù)據(jù)為空","loadingRecords": "載入中...","infoThousands": ",","paginate": {"first": "首頁(yè)","previous": "上頁(yè)","next": "下頁(yè)","last": "末頁(yè)"},"aria": {paginate: {first: '首頁(yè)',previous: '上頁(yè)',next: '下頁(yè)',last: '末頁(yè)'},"sortAscending": ": 以升序排列此列","sortDescending": ": 以降序排列此列"},"decimal": "-","thousands": "."},"processing": true,"searching" : false,"pageLength": 100,"serverSide": true,"columnDefs": [ {"searchable": false,"orderable": false,"targets": "_all",}],"dom": '<"top">rt<"bottom"flpi><"clear">',columns: [{ data: 'id' ,"orderable" : false},{ data: 'goodsLocationNumber' },{ data: 'locationTypeName' ,"orderable" : false},{ data: 'saveMaterialTypeName' ,"orderable" : false},{ data: 'materielStatusName',"orderable" : false},{ data: 'shelveName' ,"orderable" : false},{ data: 'remark',"orderable" : false }],columnDefs: [{//?? 指定第1列，從0開始，0表示第一列，1表示第二列……"targets": 0,"bSortable": false,"render": function(data, type, row, meta) {if (row.isSelected == 1){return '<input type="checkbox" class="checkchild" onclick="childClick(this)" checked="checked" value="' + row.id + '" />'}return '<input type="checkbox" class="checkchild" onclick="childClick(this)" value="' + row.id + '" />'}}],"ajax": function (data, callback, setting) {data.editActionId = $("#refundOrderId").val();$.ajax({type: 'POST',url: "/busGoodsLocation/getRejectsLocationsList",cache: false,? //禁用緩存//async: true,data: JSON.stringify(data),? //傳入組裝的參數(shù)contentType: "application/json",dataType: "json",success: function (result) {callback(result);}})}});}); });

?

總結(jié)

以上是生活随笔為你收集整理的DataTables中提示：DataTables warning: table id=example - Cannot reinitialise DataTable.的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。