时间:2021-05-26
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实现表格批量删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
首先介绍下这两个插件功能 1.DataTables是一个jQuery的表格插件。官方网站及其下载地址:http:/www.datatables.net其主要特点
DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下一、初始化在页面中Colu
下面这篇文章主要介绍了jQuery实现htmltable行Tr的复制、删除、计算功能,涉及jQuery针对table表格的常见复制、添加、删除与计算行数等简
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。主要功能分页,即时搜索和排序几乎支持任何数据源
本文实例讲述了jquery+php实现导出datatables插件数据到excel的方法。分享给大家供大家参考。具体如下:DataTables是一个jQuery