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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery+ajax实现用户登录验证
Sep 13 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数组排序usort、uksort与sort函数用法
2014/11/17 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
用python制作个音乐下载器
2021/01/30 Python
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
Android面试题附答案
2014/12/08 面试题
大学生应聘自荐信
2013/10/11 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
初级职称评定工作总结
2015/08/13 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
php双向队列实例讲解
2021/11/17 PHP