jQuery+Datatables实现表格批量删除功能【推荐】


Posted in jQuery onOctober 24, 2018

Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

最近遇到这样的需求要求把表格批量删除。下面通过实例代码给大家介绍下。

1:点击全选的选择框CheckBox,选中以下列表中所有的选择框

2:再次点击全选的选择框CheckBox,不选中以下列表中所有的选择框

3:单选某个选择框

如图所示:

http://recordit.co/GLj5a5BWo9

jQuery+Datatables实现表格批量删除功能【推荐】

简单代码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内容:

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();
    }
   });
  }
 })

总结

以上所述是小编给大家介绍的jQuery+Datatables实现表格批量删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
jQuery pagination分页示例详解
Oct 23 #jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
jquery分页插件pagination使用教程
Oct 23 #jQuery
使用jquery Ajax实现上传附件功能
Oct 23 #jQuery
jquery实现动态添加附件功能
Oct 23 #jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 #jQuery
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
You might like
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
jquery获取节点名称
2015/04/26 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python使用webbrowser浏览指定url的方法
2015/04/04 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
JSF的标签库有哪些
2012/04/27 面试题
大学生职业生涯规划范文
2014/01/22 职场文书
网络书店创业计划书
2014/02/07 职场文书
出生公证书
2015/01/23 职场文书
六一儿童节致辞
2015/07/31 职场文书
高中同学会致辞
2015/08/01 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
JS实现九宫格拼图游戏
2022/06/28 Javascript
Moment的feature导致线上bug解决分析
2022/09/23 Javascript
python中validators库的使用方法详解
2022/09/23 Python