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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jQuery-App输入框实现实时搜索
Nov 19 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 file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
关于毕业的中学校园广播稿
2014/01/26 职场文书
成龙洗发水广告词
2014/03/14 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
检讨书模板大全
2015/05/07 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android