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去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
文章推荐系统(三)
2006/10/09 PHP
PHP 中dirname(_file_)讲解
2007/03/18 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
jQuery实现简易QQ聊天框
2020/02/10 jQuery
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
使用Python解析JSON数据的基本方法
2015/10/15 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
Python进程池Pool应用实例分析
2019/11/27 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
世界上最好的帽子:Tilley
2016/11/27 全球购物
《再见了,亲人》教学反思
2014/02/26 职场文书
教师年度考核评语
2014/04/28 职场文书
土地租赁意向书
2014/07/30 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
浅析Python实现DFA算法
2021/06/26 Python