JQuery datatables 表頭複選框切換頁面時保持選中的問題解決
阿新 • • 發佈:2019-02-18
在使用強大的datatables表格外掛時,發現,發現如果在表頭添加了複選框之後,當第一頁選中,點選切換下一頁的時候,複選框還是選中的狀態,這個是不對的,需要找一個監聽表格繪製完成的函式,重新設定checkbox為未選中,可以加入如下方式:
完整的js檔案如下://切換下一頁更新複選框的狀態為不選中 "fnDrawCallback": function() { alert("切換下一頁更新複選框狀態"); $(this).find('thead input[type=checkbox]').removeAttr('checked'); $.uniform.update(); alert("切換下一頁更新複選框狀態"); },
$("#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("沒有資料"); } }); });