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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 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
新52大事件
2020/03/03 欧美动漫
php校验表单检测字段是否为空的方法
2015/03/20 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
CI框架常用方法小结
2016/05/17 PHP
php可变长参数处理函数详解
2017/02/22 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
js的with语句使用方法
2007/09/21 Javascript
JS 控制CSS样式表
2009/08/20 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
一步步教你用Python实现2048小游戏
2017/01/19 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
python hook监听事件详解
2018/10/25 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
Python shelve模块实现解析
2019/08/28 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
python excel和yaml文件的读取封装
2021/01/12 Python
三年级学生评语
2014/04/23 职场文书
白酒营销策划方案
2014/08/17 职场文书
工作时间证明
2015/06/15 职场文书
交流会主持词
2015/07/02 职场文书
环保建议书作文400字
2015/09/14 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
iPhone13将有八大升级
2021/04/15 数码科技