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 03 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery操作css样式
May 15 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 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
多文件上传的例子
2006/10/09 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
Python语言描述KNN算法与Kd树
2017/12/13 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python使用thrift教程的方法示例
2019/03/21 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
益模软件Java笔试题
2012/03/27 面试题
国外软件测试工程师面试题
2016/12/09 面试题
工商管理毕业生推荐信
2013/12/24 职场文书
七年级地理教学反思
2014/01/26 职场文书
初三学习决心书
2014/03/11 职场文书
小学运动会演讲稿
2014/08/25 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
小学生表扬稿范文
2015/05/05 职场文书
借钱欠条怎么写
2015/07/03 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android