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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
python中global与nonlocal比较
2014/11/21 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
聘用意向书范本
2014/04/01 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
公司宣传语大全
2015/07/13 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis