jQuery+Datatables實現表格批量刪除功能
摘要：
祖傳程式碼的存在，這個專案自我進公司以來，就一直在改寫加上維護，沒有什麼太厲害的技術，據說在我進公司之前，是經過兩個Java後臺來編寫遺留下來的程式碼，公司覺得若是重新搭建框架過於費力，於是一直沿用至今，隨著功能的越來越多，維護起來也是相當的費腦，每次修改的時候，我都會將某個部分的功能記錄下來...
祖傳程式碼的存在，這個專案自我進公司以來，就一直在改寫加上維護，沒有什麼太厲害的技術，據說在我進公司之前，是經過兩個Java後臺來編寫遺留下來的程式碼，公司覺得若是重新搭建框架過於費力，於是一直沿用至今，隨著功能的越來越多，維護起來也是相當的費腦，每次修改的時候，我都會將某個部分的功能記錄下來，寫在自己的技術部落格裡面，以防混淆。
主要功能有：jQuery+Datatables實現表格批量刪除功能
1：點選全選的選擇框CheckBox，選中以下列表中所有的選擇框
2：再次點選全選的選擇框CheckBox，不選中以下列表中所有的選擇框
3：單選某個選擇框
如圖所示：
ofollow,noindex">http://recordit.co/GLj5a5BWo9
GLj5a5BWo9.gif
簡單程式碼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後前端妹子，愛程式設計，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。