效果:
效果图
前面的小方块是框架自带的效果。
首先在html中绑定一个selectAll()点击事件。
table style="width:100%;" class="table table-bordered table-striped table-hover js-basic-example dataTable">
<thead>
<tr>
<th class='select-checkbox' onclick="selectAll()">
<input type="checkbox" id="checkSelect" />
</th>
<th>编号</th>
<th>品牌</th>
<th>区域</th>
<th>位置信息</th>
<th>IP</th>
<th>端口</th>
<th>操作</th>
</tr>
</thead>
</table>
js部分:
var table;
var selectAllFlag = true;
var pageFlag = false;
function selectAll(){
$("input[type='checkbox']").prop("checked",selectAllFlag);
selectAllFlag = !selectAllFlag;
}
function deleteSelect() {
$('#deleteSelect').click(
function() {
var array = new Array();
var length=$("input:checkbox[name=id]:checked").length;
$("input:checkbox[name=id]:checked").each(function(){
array.push($(this).val())
});
if (length == 0) {
swal({
title : "批量删除失败",
text : "请先勾选需要删除的数据",
type : "error",
showConfirmButton : false,
timer : 2000
});
} else {
swal(
{
title : "删除账号",
text : "<span style='color:#F44336;'>删除操作后该记录将被删除,并且无法恢复</span>",
type : "info",
showCancelButton : true,
confirmButtonColor : "#2196F3",
confirmButtonText : "确定",
cancelButtonText : "取消",
closeOnConfirm : false,
html : true
}, function() {
for (var i = 0; i < array.length; i++) {
deleteCallback(array[i])
}
});
}
})
}
function buildTableConfigJson(operateCell) {
var configJson = {
"searching" : false,
"lengthChange" : false,
"pageLength" : 10,
ordering : false,
"serverSide" : true,
select : {
style : 'multi',
selector : 'td:first-child'
},
language : {
"lengthMenu" : "_MENU 条记录每页",
"zeroRecords" : "没有找到记录",
"info" : "记录数:_TOTAL_",
"infoEmpty" : "无记录",
"infoFiltered" : "(从 _MAX_ )条记录过滤",
"paginate" : {
"previous" : "上一页",
"next" : "下一页"
}
},
ajax : {
dataSrc : 'data',
complete : function() {
if (!pageFlag) {
table.page('previous').draw('page');
}
}
},
drawCallback : function(settings) {
if (table.page() > 0 && table.data().length == 0) {
pageFlag = false;
} else {
pageFlag = true;
}
},
columnDefs: [
{
orderable : false,
className : 'select-checkbox',
targets : 0,
render : function(data, type, row) {
return '<input class="checkchild" type="checkbox" name="id" value="'+row.id+'"/>';
}
},
{
targets : -1,
render : operateCell,
}
]
};
return configJson;
}
注意点:
render : function(data, type, row) {
return '<input class="checkchild" type="checkbox" name="id" value="'+row.id+'"/>';
}
如果不加value取出来的值只有一个on,所以通过row.id把行数的id带过去。
网友评论