jQuery+Datatables實(shí)現(xiàn)表格批量刪除功能【推薦】

更新時(shí)間：2018年10月24日 15:01:46 作者：祈澈菇?jīng)?

這篇文章主要介紹了jQuery+Datatables實(shí)現(xiàn)表格批量刪除功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

Datatables是一款jquery表格插件。它是一個(gè)高度靈活的工具，可以將任何HTML表格添加高級的交互功能。

最近遇到這樣的需求要求把表格批量刪除。下面通過實(shí)例代碼給大家介紹下。

1：點(diǎn)擊全選的選擇框CheckBox，選中以下列表中所有的選擇框

2：再次點(diǎn)擊全選的選擇框CheckBox，不選中以下列表中所有的選擇框

3：單選某個(gè)選擇框

如圖所示：

http://recordit.co/GLj5a5BWo9

簡單代碼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("請選擇需要?jiǎng)h除的消息");
   return;
  }
  if (confirm("確認(rèn)刪除嗎？")) {
   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實(shí)現(xiàn)表格批量刪除功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: