j2ee 简单网站搭建：（九）jquery datatables + jquery ui dialog 插件使用入门-白红宇

j2ee 简单网站搭建：（九）jquery datatables + jquery ui dialog 插件使用入门

阅读量：6818 次

发布时间：2019-06-26

本文共 8393 字，大约阅读时间需要 27 分钟。

jquery datatables 版本 1.10.15，官方下载网站 https://www.datatables.net/

jquery datatables 的使用主要有以下几个步骤

1 将 datatables 官方的压缩包解压并配置到网站中

2 在网页中添加 datatables 需要的基本 css 文件和 javascrpt 文件 (包括对 jquery 核心文件的引用)

3 为页面中需要调用 datatables 的 table 插件在页面最下方 </body> 标签内编写 jquery 代码让 table 绑定插件并进行初始化设置，在初始化时比较重要的参数包括：

1) 每页数据条数：pageLength

2) 是否启动服务端提供 ajax 数据：serverSide

3) 通过 ajax 方式从服务器端获得数据：ajax

4) 每行行号：rowId

5) 每列同 ajax 中列数据的对应关系：columns

4 处理翻页和查询方法

jquery ui dialog 的使用主要步骤有：

1 在 jquery 官方下载和引用 ui 库

2 对需要作为弹出框的 div 标签使用 dialog 插件

3 初始化dialog，主要的设置包括

1) 设置是否自动显示弹出框 autoOpen

2) 设置是否启动模态窗口 modal

3) 设置弹出框的按钮和按钮绑定的处理方法 buttons

本例通过在一个页面中实现服务器端提供 ajax 数据、列表数据展现、数据全选和取消、单条数据修改、数据翻页为例将两个插件结合使用

一在页面中加入对 datatables 和 jquery ui dialog 的 css 、 javascrpt 文件引用

1 在文件 <head> 标签下添加 css 文件

2 在文件 </body> 标签前加入对 javascript 文件的引入

二对使用 datatables 插件的 table 标签进行绑定和初始化

假设 html 中 id 为 sampletable 的 table 标签是绑定 dataTables 的表单，整个初始化 javascript 代码放在 jquery 的 $(document).ready(function() {}); 中实现：

table = $('#sampletable').DataTable({ // 初始化表格    responsive: true, // 开始响应式    pageLength : 5, // 每页长度    ordering : false, // 是否支持排序    searching : false, // 是否显示查询    lengthChange : false, // 是否显示更改每页显示长度下拉菜单    language : { // 基本的文字显示内容设置        decimal :        "",        emptyTable :     "...数 据 为 空...",        info :           "当前第 _PAGE_ 页，共 _PAGES_ 页",        infoEmpty :      "无记录",        infoFiltered :   "",        infoPostFix :    "",        thousands :      ",",        lengthMenu :     "每页  _MENU_ 条",        loadingRecords : "数据加载中...",        processing :     "数据加载中...",        search :         "查找:",        zeroRecords :    "没找到任何记录",        paginate : {            first :      "首页",            last :       "尾页",            next :       "下一页",            previous :   "上一页"        },        aria : {            sortAscending :  ": 升序排列",            sortDescending : ": 降序排列"        }    },    processing : true, // 服务器处理时显示处理中（必选项）    serverSide : true, // 设服务器端处理（必选项）    ajax : {        url: "search", // ajax调用地址，附加总记录条数信息，为减少每次翻页都需要向数据库提交查询记录条数的请求，提升执行性能        type:"POST",        dataType : "json",        // 下边一行代码是对服务器端传来的数据进行加工        // 这里千万注意，不要写成 data: {recordsTotal: $('#ipt_records_total').val()}，这样传递的是第一次页面加载的时候控件的静态值，之后怎么设置控件的值，取值都是第一次的，需要写出函数的方式才能取到变化后的值        // 代码逻辑中 d.recordsTotal = $('#ipt_records_total').val() 是在页面中增加了一个保存所有数据的记录数的控件 ipt_records_total，每次刷新页面的时候让该控件向 datatables 赋值，服务器端如果不是重新查询或者第一次加载页面，控件的值不变，这样就不会每次翻页导致在数据库中 sum 以便记录数，提升效率        // 方法中的 d 包含 datatables 原本传输的数据，在方法中如果想处理服务器端传来的数据，必须定义和使用这个参数，服务器端传递的所有数据属性都可以通过这个参数获得        data: function (d) {d.recordsTotal = $('#ipt_records_total').val();} //     },    rowId : "id", // 设置行id，用于修改、删除时传值    columns : [ // 设置每列的数据和显示内容        {render : function(data, type, full, meta) {return meta.settings._iDisplayStart + meta.row + 1;}, width : "5%"}, // 第一列使用方法返回列内容，其中 render 后跟的就是方法； meta.settings._iDisplayStart 是 datatables 插件默认的当前页面的起始数据索引，比如现在是第2也，起始数据索引就是 19；meta.row 是当前行的行号        {render : function(data, type, full, meta) {return '';}, width : "5%"}, // 第二列是单选按钮列，onclick 中的 fnCheckBoxCheckUp 方法判断是否将全选按钮选中或取消选中        {data : "ajax json 数据中的列", width : "25%"}, //         {data : "ajax json 数据中的列", width : "25%"},        {data : "ajax json 数据中的列", width : "10%", render : function(data, type, full, meta) {return data == "1" ? "启用" : "停用";}}, // 本列如果数据是 1 显示启用，如果数据是 0 显示停用        {data : "id", render : function(data, type, full, meta) {return '信息修改';}}] // 本列是单条信息修改连接，点击后调用 fnAdminInfoModify 方法调用修改弹出框进行信息修改，});$('#sampletable').on( 'draw.dt', function () { // 绑定 sampletable 表格的绘制方法，让全选按钮得到正确设置    $('#cb_select_all').prop('checked', false); // 设置表格翻页事件 取消全选控件的选择状态    $('#ipt_records_total').val(table.page.info().recordsTotal); // 保留记录条数，如果记录为0，进行记录条数查询，如果记录不为0，不进行记录查询，提升查询性能，例如在查询条件变换后将 #ipt_records_total的值设置为0，服务器端会重新做最全的查询});

三对使用 jquery ui dialog 插件的 div 标签进行初始化，代码放在 jquery 的 $(document).ready(function() {}); 中实现：

以单条数据进行修改的时候弹出修改页面为例，假设页面中 id 为 modifydiv 的 div 标签是弹出框，那么初始化代码如下：

$('#modifydiv').dialog({ // 初始修改弹出框    autoOpen: false, // 取消自动打开    modal: true, // 启用模态窗口    buttons: { // 定义弹出框下边的按钮和按钮需要执行的操作        "修改" : function() { // 修改按钮操作            if ($('#ipt_modify_id').val().replace(/(^s*)|(s*$)/g, "").length > 0) { // 保存需要修改的信息的数据id是否为空                $.post("modify", // 服务器端修改方法                    {id: $('#ipt_modify_id').val(), email: $('#ipt_modify_email').val(), phone: $('#ipt_modify_phone').val()}, // 向服务器传递的数据                    function (result) { // 调用返回的结果进行处理                        if (result != null && result.status == true) {                            $('#div_alert').text("修改成功！").prop('class', 'alert alert-success'); // 设置提示信息并改变提示框样式为成功                            $('#ipt_modify_id').val(''); // 修改完成清理数据 id                             $("#dt_categorylist").dataTable().fnDraw(false); // 该方法可以在datatables的当前页刷新数据                        }                        else $('#div_alert').text("修改失败！").prop('class', 'alert alert-warning'); // 设置提示信息并改变提示框样式为警告                    }                );                $(this).dialog("close");            }            else $('#div_alert').text("核心参数丢失,修改失败！").prop('class', 'alert alert-warning');        }    }});

四为绑定了 datatables 的 table 提供全选和取消全选的代码

1 全选 checkbox 框点击控制表格中所有数据项的选择 checkbox 控件的选择状态

$('#cb_select_all').click(function() {$(':checkbox').prop('checked', this.checked);}); // 初始化全选 checkbox 空间，让所有数据被选择或取消选择

2 表格中每行数据的 checkbox 选择控件点击后判断是否要将页面中的全选 checkbox 控件的状态进行变更，即如果所有数据选中则全选 checkbox 控件选中，如果有一个没有选择则全选 checkbox 取消选中

function fnCheckBoxCheckUp(checkbox) { // 判断是否全选，控制全选框，该方法在 dataTables 的 columns 属性被绑定时调用    if ($(checkbox).prop('checked') && ($('#dt_adminlist td :checkbox:checked').length >= table.page.len()))         $('#cb_select_all').prop('checked', true);    else         $('#cb_select_all').prop('checked', false);}

五服务端处理代码片段

@RequestMapping(value = "/search", produces = "application/json;charset=UTF-8")public @ResponseBody Map
    
      search( // 表格的数据加载和传输方法，翻页功能也在该方法中        @RequestParam(value = "draw", required = false, defaultValue = "") String draw, // dataTables 插件持有的默认值，该值控制 datatables 的提交是否和服务端返回数据一一对应        @RequestParam(value = "start", required = false, defaultValue = "0") Integer start, // 当页需要查询数据的起始索引        @RequestParam(value = "length", required = false, defaultValue = "10") Integer length, // 当页需要查询数据的结束索引        @RequestParam(value = "search", required = false, defaultValue = "") String search, // 查询关键字        @RequestParam(value = "recordsTotal", required = false, defaultValue = "0") Integer recordsTotal) { // 总的记录数            int count = 0;    List
     
       list = null;    try {        // 如果传入的保存的记录数为0，则重新查询记录总数，可以减少查询，提升性能，因此在查询条件更改时可以设置前端传入的记录数为0        if (recordsTotal == 0) count = adminService.getAdminShortListCountBySearchKey(search);         else count = recordsTotal;            list = adminService.getAdminShortListBySearchKey(search, start, length);    }    catch (Exception e) {list = null;}            Map
      
        map = new HashMap
       
        ();    map.put("draw", draw);    map.put("recordsTotal", count);    map.put("recordsFiltered", count);    map.put("data", list);    return map;}@RequestMapping(value = "/modify", produces = "application/json;charset=UTF-8")public @ResponseBody JsonResult modify(        @RequestParam(value = "id", required = true) Integer id,        @RequestParam(value = "email", required = false) String email,        @RequestParam(value = "phone", required = false) String phone) {            JsonResult result = new JsonResult();            Admin admin = adminService.getAdminById(id);    if (admin == null) {        result.setStatus(false);        result.setMessage("改用户信息查找失败");        return result;    }            admin.setEmail(email);    admin.setPhone(phone);    String validateResult = ValidationUtil.beanValidate(admin); // 服务器端对bean进行验证，失败则返回失败信息    if (!validateResult.isEmpty()) {        result.setMessage(validateResult);        result.setStatus(false);        return result;    }            try {result.setStatus(adminService.modify(admin));}    catch (Exception e) {        result.setStatus(false);        result.setMessage(e.getMessage());    }            result.setMessage(result.getStatus() ? "修改成功" : "修改失败[" + result.getMessage() + "]");    return result;}

转载于:https://my.oschina.net/ioooi/blog/1525729

你可能感兴趣的文章

pytorch梯度裁剪（Clipping Gradient）：torch.nn.utils.clip_grad_norm