我正在使用Jquery Datatable
。我希望第一列包含标题和带复选框的行,并且应该选中标题复选框和剩余行的复选框。我有以下实施。
数据表属性
"aoColumns": [{ "sTitle": "<input type='checkbox' id='selectall' onclick='toggleChecks(this);' ></input>", "mDataProp": null, "sWidth": "20px", "sDefaultContent": "<input type='checkbox' ></input>", "bSortable": false },null,null,null,null,null,null]
数据表行
<td><input type="checkbox' class="case"></input></td>
Javascript功能
function toggleChecks(obj)
{
$('.case').prop('checked', obj.checked);
}
当我在单页面上时这很好用。但是当我进行分页时,其他页面的复选框仍未选中。如何实现这一点,使所有复选框的行为一致。请协助。
答案 0 :(得分:3)
我做过类似的事情,
$('#selectall').change(function() {
var isSelected = $(this).is(':checked');
if(isSelected){
$('.case').prop('checked', true);
}else{
$('.case').prop('checked', false);
}
});
准备好文件。
答案 1 :(得分:0)
当页面发生变化时,您应该使用函数fnDrawCallback在表中更新。
您可以在此函数中检查标题复选框的值并更新新行复选框。
您还可以为模型中的对象添加布尔值,并在选中或取消选中时更改该值。如果您访问模型,则可以修改所有元素的值,而不仅仅是已渲染的元素。然后,当您加载单元格时,使用复选框表示true / false。这是最一致的方法,但可能需要做更多的工作才能在模型和视图之间获得良好的同步。
答案 2 :(得分:0)
人,
有类似的问题需要快速解决。
针对此问题制定了解决方法,可能有助于某人:
当我动态地向表格提供一些数据时:
oTable1.fnAddData
([
"<span id='" + any_obj.id + "' style='display:block; width: 10px;'><input class='checkbox' type='checkbox' /></span>",
title,
modified,
version
] );
注意复选框的范围。这显然是隐藏的,可以轻松访问。