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日期范围选择器附源码下载
May 23 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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
Array of country list in PHP with Zend Framework
2011/10/17 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Python+django实现文件下载
2016/01/17 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Python科学画图代码分享
2017/11/29 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
交通事故协议书范文
2014/10/23 职场文书
关于运动会的广播稿
2015/08/19 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang