在使用强大的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' οnclick='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("没有数据");
}
});
});