在运用datatable时,经常要在td中嵌入checkbox,但是如果datatable有翻页时,页面可能读不到翻页后的checkbox,例如有个全选的勾选框,需要全选时,如果使用
$('.content-box .select-all').click(function() {
if ($(this).is(':checked'))
$(':checkbox').attr('checked', true);
else
$(':checkbox').attr('checked', false);
});
只能勾选当前页的所有checkbox,其他页的表格checkbox依然是不能勾选的。
现在的一个解决方法是读取datatable的长度,并更新checkbox
$('.content-box .select-all').click(function() {
var tableSetings=$('#testtable').dataTable().fnSettings();
for(var i=0;i<tableSetings.aiDisplay.length;i++){
if ($(this).is(':checked')){
$('#testtable').dataTable().fnUpdate( '<input type="checkbox" checked>' ,i, 0,false );
}else{
$('#testtable').dataTable().fnUpdate( '<input type="checkbox" >' , i, 0 ,false);
}
}
});
要擅长运用$('#testtable').dataTable().fnSettings()这个对象,里面有许多我们需要的信息。
-----------------------------------------------------------------------------------------------------------------------------------------------
以上所说的是如何全选checkbox,下面要介绍如何读取所有被选中的行数据(包括不在当前页的行数据)
一种方法是加入一个隐藏列来标识该行有没有被选中,用delegate监听checkbox的click事件,当有click事件时,改变相应行在隐藏列里面的数值(0和1或者其他标识),当js要读取被勾选的行时就可以直接用fnfliter过滤出隐藏列中标识为1(或者其他)的行数据。(这是相对于旧版本的datatable的api而言)
以上是学习过程中的经验总结,菜鸟一个。。。求别喷。。