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中map函数的两种方式
Apr 07 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jquery插件实现轮播图效果
Oct 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开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
xml和web特殊字符
2009/04/28 Javascript
浅析js封装和作用域
2013/07/09 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
深入理解Python 多线程
2020/06/16 Python
python 写一个水果忍者游戏
2021/01/13 Python
求职者应聘的自我评价
2013/10/16 职场文书
自动化专业本科毕业生求职信
2013/10/20 职场文书
大学生如何写自荐信
2014/01/08 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
《海底世界》教学反思
2014/04/16 职场文书
异地恋情人节寄语
2015/02/28 职场文书
运动会3000米加油稿
2015/07/21 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
小学中队委竞选稿
2015/11/20 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server