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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 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
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
php远程下载类分享
2016/04/13 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
Python实现读取文件最后n行的方法
2017/02/23 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python之拟合的实现
2019/07/19 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Django REST 异常处理详解
2020/07/15 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
关于旷工的检讨书
2014/02/02 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS