jQuery+Datatables实现表格批量删除功能【推荐】
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
最近遇到这样的需求要求把表格批量删除。下面通过实例代码给大家介绍下。
1:点击全选的选择框CheckBox,选中以下列表中所有的选择框
2:再次点击全选的选择框CheckBox,不选中以下列表中所有的选择框
3:单选某个选择框
如图所示:
简单代码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 Datatables 动态列+跨列合并实现代码
- jQuery+datatables插件实现ajax加载数据与增删改查功能示例
- jQuery Datatables表头不对齐的解决办法
- jQuery插件DataTables分页开发心得体会
- JQuery.dataTables表格插件添加跳转到指定页
- jQuery中Datatables增加跳转到指定页功能
- 利用JQuery实现datatables插件的增加和删除行功能
- jQuery.datatables.js插件用法及api实例详解
- jQuery dataTables与jQuery UI 对话框dialog的使用教程
- jquery表格datatables实例解析 直接加载和延迟加载
- jQuery插件dataTables添加序号列的方法
- jQuery DataTables插件自定义Ajax分页实例解析
- jQuery插件datatables使用教程
- jQuery表格插件datatables用法汇总
- jQuery表格插件datatables用法详解
- jquery+php实现导出datatables插件数据到excel的方法
- jQuery表格插件datatables用法总结
- Jquery Datatables的使用详解
相关文章
jQuery中serializeArray()与serialize()的区别实例分析
这篇文章主要介绍了jQuery中serializeArray()与serialize()的区别,结合实例形式分析了jQuery中serializeArray()与serialize()的具体功能、使用技巧与用法区别,需要的朋友可以参考下2015-12-12jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
当对象获得焦点后,自动把光标移到内容最后,使用focus()函数便可实现,下面有个不错的示例,感兴趣的朋友可以参考下2013-09-09jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
鼠标移动上去,元素的left增加N像素,鼠标移开会慢慢的移动到原来的位置2010-03-03EasyUI修改DateBox和DateTimeBox的默认日期格式示例
本篇文章主要介绍了EasyUI修改DateBox和DateTimeBox的默认日期格式示例,具有一定的参考价值,有兴趣的可以了解一下。2017-01-01
最新评论