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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jQuery实现全选按钮
Jan 01 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 JSON 数据解析代码
2010/05/26 PHP
php中的登陆login实例代码
2016/06/20 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
微信小程序自定义toast的实现代码
2018/11/16 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python+django+rest框架配置创建方法
2019/08/31 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
python logging.info在终端没输出的解决
2020/05/12 Python
什么是python类属性
2020/06/10 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
python搜索算法原理及实例讲解
2020/11/18 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
寒假社会实践个人总结
2015/03/06 职场文书
2015年招生工作总结
2015/05/04 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
2019秋季运动会口号
2019/06/25 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
python基础之爬虫入门
2021/05/10 Python