jQuery+Datatables實現表格批量刪除功能

祖傳代碼的存在，這個項目自我進公司以來，就一直在改寫加上維護，沒有什麼太厲害的技術，據說在我進公司之前，是經過兩個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();
                }
            });
        }
    })