jQuery+Datatables实现表格批量删除功能【推荐】

2019-11-19 12:38:14

字体：大中小

来源：转载

供稿：网友

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

最近遇到这样的需求要求把表格批量删除。下面通过实例代码给大家介绍下。

1：点击全选的选择框CheckBox，选中以下列表中所有的选择框

2：再次点击全选的选择框CheckBox，不选中以下列表中所有的选择框

3：单选某个选择框

如图所示：

http://recordit.co/GLj5a5BWo9

简单代码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实现表格批量删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：AngularJS 多指令Scope问题的解决

下一篇：webpack打包非模块化js的方法