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插件制作 自增长输入框实现代码
Aug 17 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery实现全选按钮
Jan 01 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
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
python openssl模块安装及用法
2020/12/06 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书