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

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

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

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

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

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

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

3：?jiǎn)芜x某個(gè)選擇框

如圖所示：

http://recordit.co/GLj5a5BWo9

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

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)的解析本地 XML 文檔操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的解析本地 XML 文檔操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)本地 XML 文檔的解析及ajax交互相關(guān)操作技巧,需要的朋友可以參考下
2020-04-04
EasyUI實(shí)現(xiàn)二級(jí)頁(yè)面的內(nèi)容勾選的方法
在使用EasyUI的時(shí)候，我們經(jīng)常回遇到在二級(jí)頁(yè)面進(jìn)行勾選的時(shí)候，這里給大家分享一個(gè)比較簡(jiǎn)單實(shí)用的實(shí)現(xiàn)方法，希望大家能夠喜歡。
2015-03-03
基于jquery的tab切換 js原理
基于jquery的tab切換使用的是js的原理。綁定鼠標(biāo)經(jīng)過(guò)事件實(shí)現(xiàn)的。
2010-04-04
jQuery plugin animsition使用小結(jié)
本文通過(guò)實(shí)例代碼給大家分享了jQuery plugin animsition用法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-09-09
jquery實(shí)現(xiàn)初次打開(kāi)有動(dòng)畫(huà)效果的網(wǎng)頁(yè)TAB切換代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)初次打開(kāi)有動(dòng)畫(huà)效果的網(wǎng)頁(yè)TAB切換代碼,涉及jquery通過(guò)鼠標(biāo)click事件控制頁(yè)面元素屬性的動(dòng)態(tài)變換實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
Jquery+CSS 創(chuàng)建流動(dòng)導(dǎo)航菜單 Fluid Navigation
有時(shí)，一個(gè)網(wǎng)站的導(dǎo)航菜單文字不能提供足夠的信息，來(lái)表達(dá)當(dāng)前菜單按鈕的內(nèi)容，一般的解決辦法是使用提示信息ToolTip，那么本文介紹的流動(dòng)導(dǎo)航菜單Fluid Navigation也可以解決此問(wèn)題，同時(shí)也為網(wǎng)站設(shè)計(jì)的添加了一些時(shí)尚而又動(dòng)感元素。
2010-02-02
用js實(shí)現(xiàn)的模擬jquery的animate自定義動(dòng)畫(huà)(2.5K)
模仿jquery的animate寫(xiě)了一個(gè)簡(jiǎn)單的動(dòng)畫(huà)實(shí)現(xiàn)方法。
2010-07-07
使用Jquery搭建最佳用戶(hù)體驗(yàn)的登錄頁(yè)面之記住密碼自動(dòng)登錄功能（含后臺(tái)代碼）
今天將登錄功能徹底完成，加入記住密碼自動(dòng)登錄功能，密碼在客戶(hù)端進(jìn)行第一次加密存儲(chǔ)。并修改了一些bug，優(yōu)化js代碼，上一版本太亂了。
2011-07-07
Easyui 之 Treegrid 筆記
easyui是一種基于jQuery的用戶(hù)界面插件集合。本文是小編自己遇到的一些有關(guān)easyui treegrid的問(wèn)題記錄，特此分享腳本之家平臺(tái)供大家參考
2016-04-04
jQuery移除tr無(wú)效的解決方法(tr是動(dòng)態(tài)添加)
移除掉某些tr（tr是動(dòng)態(tài)添加的）嘗試了很多方法，都不見(jiàn)效，后來(lái)發(fā)現(xiàn)個(gè)不錯(cuò)的方法，于是與大家分享下
2014-09-09