jQuery+Datatables实现表格批量删除功能

简介: jQuery+Datatables实现表格批量删除功能

祖传代码的存在,这个项目自我进公司以来,就一直在改写加上维护,没有什么太厉害的技术,据说在我进公司之前,是经过两个Java后台来编写遗留下来的代码,公司觉得若是重新搭建框架过于费力,于是一直沿用至今,随着功能的越来越多,维护起来也是相当的费脑,每次修改的时候,我都会将某个部分的功能记录下来,写在自己的技术博客里面,以防混淆。

主要功能有:jQuery+Datatables实现表格批量删除功能

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();
                }
            });
        }
    })
相关文章
|
6月前
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
|
6月前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
58 0
|
5月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
42 0
|
5月前
|
JavaScript 前端开发 索引
jQuery如何实现一个轮播图左右翻页的功能
jQuery如何实现一个轮播图左右翻页的功能
42 0
|
6月前
|
JavaScript
jQuery最简单的留言功能^-^
jQuery最简单的留言功能^-^
|
11月前
|
JavaScript 前端开发
【jQuery学习】—jQuery操作CSS和表格
【jQuery学习】—jQuery操作CSS和表格
|
Web App开发 JavaScript 前端开发
jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行   合并的方法 $("#tableid").mergeCell({  cols:[X,X] ///参数为要合并的列}) /** * 操作表格 合并单元格 行 * 2016年12月13日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.p
1319 0
|
前端开发 JavaScript
jQuery操作表格背景色迭代和鼠标移动事件(CSS中使用expression)
表格的操作: 1:通过树形迭代,获取要操作的表格节点,jQuery实现动态的table背景色迭代,和鼠标移动时间,js实现(使用于一层表格,js方法参数为表格id,颜色自定义): 表格css代码: #userinfoshow tr th{background: #B15BFF; text-align:center;vertical-align:middle;}//表头背景色和上下左
1448 0
|
JavaScript 前端开发
JQuery操作一个表格简单示例
jquery操作table的一个简单示例,仅做参考,具体可以根据原javascript操作table的操作更改为jquery操作方式。 .mainTable{ background-color:#ffcc00; width:85%; margin:auto; font-size:12px} .
983 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload