场景

在页面中有一个下拉框select，在select的change事件中，每此要根据选择的值的

不同进而在dataTables中显示不一样的值。

错误提示如图：

错误代码如下：

$(document).ready(function() {//选择退货方后退货目的地绑定联动$("#businessInitiator").bind("change", function () {//获取选中的option的value值var selected = $("#businessInitiator option:selected").val();//获取退货目的地Input对象var destination = $("#destination");switch (selected){case '原料立库':destination.val("原料立库退货点")break;case '清洁车间':destination.val("清洁车间退货点")break;case '正极车间':destination.val("正极车间退货点")break;case '负极车间':destination.val("负极车间退货点")break;default:destination.val("其它退货点")}//退货目的地联动完成// DataTable初始化var t = $('#example').DataTable({"language": {"processing": "处理中...","lengthMenu": "显示 _MENU_ 项结果","zeroRecords": "没有匹配结果","info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项","infoEmpty": "显示第 0 至 0 项结果，共 0 项","infoFiltered": "(由 _MAX_ 项结果过滤)","infoPostFix": "","search": "搜索:","searchPlaceholder": "搜索...","url": "","emptyTable": "表中数据为空","loadingRecords": "载入中...","infoThousands": ",","paginate": {"first": "首页","previous": "上页","next": "下页","last": "末页"},"aria": {paginate: {first: '首页',previous: '上页',next: '下页',last: '末页'},"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),  //传入组装的参数contentType: "application/json",dataType: "json",success: function (result) {callback(result);}})}});});
});

实现

根据错误提示是不能初始化dataTable，即在同一个页面中不能多次初始化DataTables。

解决，在每此的点击事件中初始化之前先还原初始化。

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

完整示例代码：

$(document).ready(function() {//选择退货方后退货目的地绑定联动$("#businessInitiator").bind("change", function () {//获取选中的option的value值var selected = $("#businessInitiator option:selected").val();//获取退货目的地Input对象var destination = $("#destination");switch (selected){case '原料立库':destination.val("原料立库退货点")break;case '清洁车间':destination.val("清洁车间退货点")break;case '正极车间':destination.val("正极车间退货点")break;case '负极车间':destination.val("负极车间退货点")break;default:destination.val("其它退货点")}//退货目的地联动完成$("#example").dataTable().fnDestroy();//还原初始化了datatable// DataTable初始化var t = $('#example').DataTable({"language": {"processing": "处理中...","lengthMenu": "显示 _MENU_ 项结果","zeroRecords": "没有匹配结果","info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项","infoEmpty": "显示第 0 至 0 项结果，共 0 项","infoFiltered": "(由 _MAX_ 项结果过滤)","infoPostFix": "","search": "搜索:","searchPlaceholder": "搜索...","url": "","emptyTable": "表中数据为空","loadingRecords": "载入中...","infoThousands": ",","paginate": {"first": "首页","previous": "上页","next": "下页","last": "末页"},"aria": {paginate: {first: '首页',previous: '上页',next: '下页',last: '末页'},"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),  //传入组装的参数contentType: "application/json",dataType: "json",success: function (result) {callback(result);}})}});});
});

DataTables中提示：DataTables warning: table id=example - Cannot reinitialise DataTable.相关推荐

DataTables warning:table id = TableDate: Cannot reinitialise DataTable的解决办法
最近碰到了这个DataTables warning:table id = oaTableDate: Cannot reinitialise DataTable问题.使用DataTables做的表格,每 ...
DataTables warning: table id=tableEquipment - Cannot reinitialise DataTable配上代码解决
DataTables warning: table id=tableEquipment - Cannot reinitialise DataTable. For more information ab ...
Vue+DataTables warning:table id=xxxx -Cannot reinitialize DataTable.报错解决方法
问题描述: 使用DataTables来写列表,用vue来渲染数据,有搜索功能,每次点击搜索就会报错,如下图所示. 问题排查: 找了一系列原因,最后发现是我每次请求完数据之后都会添加分页功能,从而导致了 ...
IDEA中提示：Warning:java: 源值1.5已过时, 将在未来所有发行版中删除
问题描述: 运行Java Web项目时,IDEA中提示:Warning:java: 源值1.5已过时, 将在未来所有发行版中删除解决方法: 1. 打开[File]-[Project Structur ...
DataTables提示：DataTables warning: table id=queueInfo_table - Requested unknown parameter 'type' for r
场景如图: 实现依据提示可知第一行第五列的type参数为空或不存在. 其官方解释为: https://datatables.net/manual/tech-notes/4 所以找到这个表的type ...
DataTables warning: table id= - Cannot reinitialise DataTable. 错误（JS表格datatable）
可能是表格重复使用时受到影响表格初始化时加上 retrieve: true, 使其可以实现复用
dataTable报错：DataTables warning: table id=example - Requested unknown parameter 'null' for row 1
使用dataTable渲染表格数据的时候警报如下解决方法:经检查发现该行返回的值为null,做个判断即可 {"data":null,"bSortable": ...
datatables ajax错误,ajax datatable - DataTables警告：table id = example - 无法重新初始化DataTable(示例代码)...
我正在从SQL中检索数据以包含在表中.我的代码返回错误"DataTables warning:table id = example - 无法重新初始化DataTable.有关此错误的更多信息 ...
利用ASP.NET MVC 的默认类型绑定器---将Jquery datatables中的数据强类型绑定到实体类中
背景描述: 本文参考资料:https://blog.csdn.net/honantic/article/details/45913403 阅读了上述博文后对我产生了启发,在ASP.NET MVC 5中 ...

DataTables中提示：DataTables warning: table id=example - Cannot reinitialise DataTable.

场景

实现

DataTables中提示：DataTables warning: table id=example - Cannot reinitialise DataTable.相关推荐

最新文章

热门文章