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实现文字打印动态效果
Apr 21 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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
Zerg兵种介绍
2020/03/14 星际争霸
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python生成随机MAC地址
2015/03/10 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
python数据封装json格式数据
2018/03/04 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
python 异步async库的使用说明
2020/05/04 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
清洁工表扬信
2014/01/08 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB