JQuery datatables 表头复选框切换页面时保持选中的问题解决

来源：互联网发布：程序化交易软件编辑：程序博客网时间：2024/06/06 09:40

在使用强大的datatables表格插件时,发现,发现如果在表头添加了复选框之后,当第一页选中,点击切换下一页的时候,复选框还是选中的状态,这个是不对的,需要找一个监听表格绘制完成的函数,重新设置checkbox为未选中,可以加入如下方式:

//切换下一页更新复选框的状态为不选中"fnDrawCallback": function() {   alert("切换下一页更新复选框状态");   $(this).find('thead input[type=checkbox]').removeAttr('checked');   $.uniform.update();   alert("切换下一页更新复选框状态");},

完整的js文件如下:

$("#wages-query").click(function() {// alert("测试");$.ajax({url : "wagePreview.action",type : "POST",async : false,data : {// "wageDate" : date},dataType : "json", // ajax返回值设置为text（json格式也可用它返回，可打印出结果，也可设置成json）success : function(data) {//alert("预览工资查询成功");$('#sample_1').DataTable().fnDestroy();$('#sample_1').DataTable({"aLengthMenu" : [[10,20,50,100,-1 ],[10,20,50,100,"All" ]],"iDisplayLength" : 10,"sDom" : "<r>t<'float_left'i><'float_right_nexpage'p><'float_right_display'l>>","oLanguage" : oLanguageData,"aaData" : data,"aoColumns" : aoColumnsData,"fnRowCallback" : function(nRow,aData,iDataIndex) {$('td:eq(0)',nRow).html("<input type='checkbox' class='checkboxes' name='everyline'  value="+ aData.identification + "></input>");if(aData.number != null && aData.number != "" ){$('td:eq(2)',nRow).html("<a style='cursor:pointer' onclick='toWagePerson(\"" + aData.number +"\");'>" + aData.name + "</a> ");}},//切换下一页更新复选框的状态为不选中"fnDrawCallback": function() {   alert("切换下一页更新复选框状态");   $(this).find('thead input[type=checkbox]').removeAttr('checked');   $.uniform.update();   alert("切换下一页更新复选框状态");},"aoColumnDefs" : [ {"bSortable" : false,"aTargets" : [ 0 ]} ]// 第一列禁止排序,因为这是复选框,不需要排序});},error : function(XMLHttpRequest,textStatus, errorThrown) {//alert("没有数据");}});});

0 0