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

摘要： 祖傳程式碼的存在，這個專案自我進公司以來，就一直在改寫加上維護，沒有什麼太厲害的技術，據說在我進公司之前，是經過兩個Java後臺來編寫遺留下來的程式碼，公司覺得若是重新搭建框架過於費力，於是一直沿用至今，隨著功能的越來越多，維護起來也是相當的費腦，每次修改的時候，我都會將某個部分的功能記錄下來...

祖傳程式碼的存在，這個專案自我進公司以來，就一直在改寫加上維護，沒有什麼太厲害的技術，據說在我進公司之前，是經過兩個Java後臺來編寫遺留下來的程式碼，公司覺得若是重新搭建框架過於費力，於是一直沿用至今，隨著功能的越來越多，維護起來也是相當的費腦，每次修改的時候，我都會將某個部分的功能記錄下來，寫在自己的技術部落格裡面，以防混淆。

主要功能有：jQuery+Datatables實現表格批量刪除功能

1：點選全選的選擇框CheckBox，選中以下列表中所有的選擇框

2：再次點選全選的選擇框CheckBox，不選中以下列表中所有的選擇框

3：單選某個選擇框

如圖所示：

ofollow,noindex">http://recordit.co/GLj5a5BWo9

簡單程式碼demo：

<thead>
<tr role="row" class="heading">
<th style="width: 44.8889px;">
全選 <inputtype="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 = '<labelstyle="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();
}
});
}
})

原文作者：祈澈姑娘技術部落格： https://www.jianshu.com/u/05f416aefbe1

90後前端妹子，愛程式設計，愛運營，愛折騰。

堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。