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代替iframe的方法(详解)
Apr 12 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery实现本地存储
Dec 22 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
PHP序列化操作方法分析
2016/09/28 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
Python面向对象封装操作案例详解
2019/12/31 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
小班秋游活动方案
2014/02/22 职场文书
保护环境演讲稿
2014/05/10 职场文书
2016年会开场白台词
2015/06/01 职场文书
中国合伙人观后感
2015/06/02 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
如何在C++中调用Python
2021/05/21 Python
Win10系统下配置Java环境变量
2021/06/13 Java/Android
DE1107机评
2022/04/05 无线电