jQuery+Datatables实现表格批量删除功能

原创

祈澈菇凉 2021-07-28 13:51:39 ©著作权

文章标签 学习 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者祈澈菇凉的原创作品，请联系作者获取转载授权，否则将追究法律责任

祖传代码的存在，这个项目自我进公司以来，就一直在改写加上维护，没有什么太厉害的技术，据说在我进公司之前，是经过两个Java后台来编写遗留下来的代码，公司觉得若是重新搭建框架过于费力，于是一直沿用至今，随着功能的越来越多，维护起来也是相当的费脑，每次修改的时候，我都会将某个部分的功能记录下来，写在自己的技术博客里面，以防混淆。

主要功能有：jQuery+Datatables实现表格批量删除功能

1：点击全选的选择框CheckBox，选中以下列表中所有的选择框
2：再次点击全选的选择框CheckBox，不选中以下列表中所有的选择框
3：单选某个选择框

如图所示：

http://recordit.co/GLj5a5BWo9

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();
                }
            });
        }
    })