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();
                }
            });
        }
    })
相关文章
|
5月前
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
|
5月前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
54 0
|
4月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
37 0
|
4月前
|
JavaScript 前端开发 索引
jQuery如何实现一个轮播图左右翻页的功能
jQuery如何实现一个轮播图左右翻页的功能
37 0
|
5月前
|
JavaScript
jQuery最简单的留言功能^-^
jQuery最简单的留言功能^-^
|
JavaScript 前端开发 程序员
Datatables快速入门开发--一款好用的JQuery表格插件
  博主是一个java后端程序员,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquery表格插件,上手很快,重点是超级好用,有完善的中文文档,今天有空,整理一下Datatable的一些使用方法及注意事项,以便随时查阅.
2935 0
|
5月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1天前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
9 4
jQuery Growl 插件(消息提醒)
|
3天前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
13 4
jQuery Cookie 插件
|
4月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
46 1