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();
                }
            });
        }
    })
相关文章
|
30天前
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
12 0
|
1月前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
31 0
|
7月前
|
JavaScript
jQuery 表格全选反选
jQuery 表格全选反选
31 0
|
7月前
|
JSON JavaScript 前端开发
jQuery动画功能和封装原理
jQuery动画功能和封装原理
43 0
|
28天前
|
JavaScript
jQuery最简单的留言功能^-^
jQuery最简单的留言功能^-^
9 1
|
4月前
|
XML JavaScript 小程序
使用jquery treetable 实现树形表格拖拽
这里记录一下使用jquery treetable时遇到的坑。 我这里的需求是做一个树形表格,并且可拖拽。 最后要实现的效果大概是这样的:(文末有实例)
26 0
|
5月前
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
63 0
jQuery点击图片来回切换功能
|
5月前
|
JavaScript BI
jQuery根据填写的input的数值导出excel表格
jQuery根据填写的input的数值导出excel表格
23 0
|
5月前
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
31 0
|
7月前
|
JavaScript
jQuery 动态添加表格数据
jQuery 动态添加表格数据
27 0