jQuery+Datatables实现表格批量删除功能
祖传代码的存在，这个项目自我进公司以来，就一直在改写加上维护，没有什么太厉害的技术，据说在我进公司之前，是经过两个Java后台来编写遗留下来的代码，公司觉得若是重新搭建框架过于费力，于是一直沿用至今，随着功能的越来越多，维护起来也是相当的费脑，每次修改的时候，我都会将某个部分的功能记录下来，写在自己的技术博客里面，以防混淆。
主要功能有：jQuery+Datatables实现表格批量删除功能
1：点击全选的选择框CheckBox，选中以下列表中所有的选择框 2：再次点击全选的选择框CheckBox，不选中以下列表中所有的选择框 3：单选某个选择框
如图所示：
GLj5a5BWo9.gif
简单代码demo：
<thead>
<tr role="row" class="heading">
<th style="width: 44.8889px;">
全选 <input type="checkbox" name="keeperUserGroup-checkable" class="group-checkable" data-set="#sample_1 .checkboxes" />
</th>
<th>告警日期</th>
<th class="a">姓名</th>
<th>性别</th>
<th>所属单位</th>
<th>位置详情</th>
</tr>
</thead>columns内容：
render : function(data, type, row, meta) {
var content = '<label style="margin-left:32px;" class="mt-checkbox mt-checkbox-single mt-checkbox-outline">';
content += ' <input type="checkbox" name="test" class="group-checkable"" value="'
+ data + '" />';
content += '</label>';
return content;
}主要的js部分代码：
/* 批量删除 */
$('#Button1').click(function() {
if ($("input[name='test']:checked")[0] == null) {
alert("请选择需要删除的消息");
return;
}
if (confirm("确认删除吗？")) {
var ids = new Array;
$("input[name='test']:checked").each(function() {
ids.push($(this).val());
n = $(this).parents("tr").index() + 1; // 获取checkbox所在行的顺序
$("table#dataTable").find("tr:eq(" + n + ")").remove();
});
$.ajax({
url : basePath + "sos/deleteAlerts",
data : "ids=" + ids,
type : "post",
dataType : "json",
success : function(data) {
dataTable.reloadTable();
}
});
}
})本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018.10.18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
