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查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
jquery插件实现搜索历史
Apr 24 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
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
PHP函数积累总结
2019/03/19 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
js实现数组转换成json
2015/06/26 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
深入了解Django View(视图系统)
2019/07/23 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
Ruby如何实现动态方法调用
2012/11/18 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
营业员演讲稿
2013/12/30 职场文书
会计自我鉴定
2014/02/04 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
2014年教师节寄语
2014/04/03 职场文书
总经理任命书范本
2014/06/05 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2016新年感言
2015/08/03 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers