您的位置:首页 > 其它

datatable动态生成复选框

2017-12-19 13:18 423 查看


首先需要说明:

1,原始的datatable是没有复选操作和批量操作的

2,当用户点击批量的时候做了非空判断,然后选中后再将选中的数据id以链接的方式传递到下一个页面

3,整个页面是jsp格式

<a  href="javascript:void(0);" id="btnAll">批量编辑</a>
<table class="table table-striped table-bordered table-hover dataTables-example" id='table'>
<thead class='head'>
<tr>
<th class='th'>
<input type="checkbox" class="checkall" />
</th>
<th>序号</th>
<th>设备编号</th>
<th>场所</th>
<th>设备型号</th>
<th>在线</th>
<th>状态</th>
<th>最后一次启动</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr data-id="${equipment.id}">
<td></td>
<td>${equipment.id}</td>
<td>${equipment.equipmentNum}</td>
<td>${equipment.siteName}</td>
<td>${equipment.equipmentType}</td>
............
</tr>
</tbody>
</table>


这里有一个问题关键点,如果列表的checkbox不是动态生成,很有可能,当用户点击第二页的头部全选的时候,会直接跳转到第一页的数据.

//动态生成复选框
var table = $('#table');
table.DataTable({
"fnDrawCallback": function() {
$(this).find('thead input[type=checkbox]').removeAttr('checked');
},
"aoColumnDefs": [{
'targets': 0,
'searchable':false,
'orderable':false,
'className': 'dt-body-center',
'render': function (data, type, row){
return '<input class="checkchild" type="checkbox"/>';
}
}]
})
//datatable全选
$('.checkall').on('click', function () {
if (this.checked) {
$(this).attr('checked','checked')
$('.checkchild').each(function () {
this.checked = true;
});
} else {
$(this).removeAttr('checked')
$('.checkchild').each(function () {
this.checked = false;
});
}
});
//批量处理数据
$('#btnAll').on('click',function(){

4000
var selectLoans = [];
$('.checkchild').each(function () {
if($(this).is(':checked')){
selectLoans.push($(this).parent().parent().attr('data-id'));
}
});
if(selectLoans.length == 0){
layer.msg('请至少选中一项进行操作');
$("#btnAll").attr("href",'javascript:void(0);');
}else{
var idListStr ='';
for (var i = 0; i < selectLoans.length; i++) {
if(i!=selectLoans.length-1){
idListStr = idListStr + selectLoans[i] +",";
}else{
idListStr = idListStr + selectLoans[i];
}
}
$("#btnAll").attr("href",'equipment/batchUpdate.do?idListStr='+idListStr);
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: