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

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

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

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

如图所示：

http://recordit.co/GLj5a5BWo9

GLj5a5BWo9.gif

简单代码demo：

    
    
    全选 

    
    告警日期
    姓名
    性别
    所属单位
    位置详情
    
    

columns内容：

render : function(data, type, row, meta) {
                        var content = '';
                        content += '    ';
                        content += '';
                        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();
                }
            });
        }
    })

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。