Datatables是一款jquery表格插件。它是一個高度靈活的工具，可以將任何HTML表格添加高級的交互功能。
最近遇到這樣的需求要求把表格批量刪除。下面通過實例代碼給大家介紹下。
1：點擊全選的選擇框CheckBox，選中以下列表中所有的選擇框
2：再次點擊全選的選擇框CheckBox，不選中以下列表中所有的選擇框
3：單選某個選擇框
如圖所示：
簡單代碼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內(nèi)容：
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(); } }); } })總結(jié)
以上所述是小編給大家介紹的jQuery+Datatables實現(xiàn)表格批量刪除功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
