【JS插件】DataTable

简述

DataTables 是一款 jQuery 表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

中文网站：http://www.datatables.club/
实例索引：http://www.datatables.club/example/
参考手册：http://www.datatables.club/manual/
帮助文档：http://www.datatables.club/reference/

页面引入

CSS

<!-- DataTables -->
<link  href="/static/css/dataTables.bootstrap.min.css">

JS

<!-- DataTables -->
<script src="/static/js/jquery.dataTables.min.js"></script>
<script src="/static/js/dataTables.bootstrap.min.js"></script>

引入CSS和JS文件后，DataTable通过以下命令启动（dataTable为表格ID）：

$('#dataTable').DataTable();

前端代码

使用 DataTables 分页功能，需要开启一些列的相关配置，分页的数据结果是由 Ajax 请求获取并解析 JSON 格式数据自动封装进表格的，代码如下：

$("#dataTable").DataTable({
    // 是否开启本地分页
    "paging": true,
    // 是否开启本地排序
    "ordering": false,
    // 是否显示左下角信息
    "info": true,
    // 是否允许用户改变表格每页显示的记录数
    "lengthChange": false,
    // 是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
    //"processing": true,
    // 是否允许 DataTables 开启本地搜索
    "searching": false,
    // 是否开启服务器模式
    "serverSide": true,
    // 控制 DataTables 的延迟渲染，可以提高初始化的速度
    "deferRender": true,
    // 增加或修改通过 Ajax 提交到服务端的请求数据
    "ajax": {
        "url": "/admin/page",
        "type":"POST"
    },
    // 分页按钮显示选项
    "pagingType": "full_numbers",
    // 设置列的数据源
    "columns": [
        {"data": "articleId"},
        {"data": "articleTitle"},
        {"data": function (row, type, val, meta) {
                var path = row.articleUrl;
                return '<img src= "'+path+'" alt="文章展示图" style="width: 100px;height: 100px;text-align: center;">'
            }},
        {"data": function (row, type, val, meta) {
            if(row.articleStatus == 1){
                return '<p style="color:orangered;">置顶</p>'
            }
            else{
                return '<p>未置顶</p>'
            }
            }},
        {"data":function (row, type, val, meta) {
                var date = DateTime.format(row.articleUpdateTime,"yyyy-MM-dd HH:mm:ss");
                return '<p>'+date+'</p>'
            }},
        {
            "data": function (row, type, val, meta) {
                return '<a href="#" type="button" class="btn btn-sm btn-default"><i class="fa fa-search"></i> 查看</a>&nbsp;&nbsp;&nbsp;' +
                    '<a href="#" type="button" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i> 编辑</a>&nbsp;&nbsp;&nbsp;' +
                    '<a href="#" type="button" class="btn btn-sm btn-danger"><i class="fa fa-trash-o"></i> 删除</a>'
            }
        }
    ],
    // 国际化
    "language": {
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    }
});

效果图：

后端代码

DataTable通过Ajax访问后台数据，默认传送多个数据，其中包含（draw、start、length），draw为DataTable标识，start为查询开始数，length为查询长度数。

DataTable要求数据返回对象按照一定的格式：

封装数据返回对象类：

package com.ronin.blog.dto;

/**
 * 分页展示对象
 * <p>Title: PageInfo</p>
 * <p>Description: </p>
 * @Author: 98
 * @Date: 2019-6-9 21:25
 */
import java.io.Serializable;
import java.util.List;

public class PageInfo<T> implements Serializable {

    private int draw;
    private int recordsTotal;
    private int recordsFiltered;
    private List<T> data;
    private String error;

    public int getDraw() {
        return draw;
    }

    public void setDraw(int draw) {
        this.draw = draw;
    }

    public int getRecordsTotal() {
        return recordsTotal;
    }

    public void setRecordsTotal(int recordsTotal) {
        this.recordsTotal = recordsTotal;
    }

    public int getRecordsFiltered() {
        return recordsFiltered;
    }

    public void setRecordsFiltered(int recordsFiltered) {
        this.recordsFiltered = recordsFiltered;
    }

    public List<T> getData() {
        return data;
    }

    public void setData(List<T> data) {
        this.data = data;
    }

    public String getError() {
        return error;
    }

    public void setError(String error) {
        this.error = error;
    }
}

Ajax方法：

/**
     * DataTable分页
     * @param draw
     * @param start
     * @param length
     * @return
     */
    @RequestMapping(value = "/page",method = RequestMethod.POST)
    @ResponseBody
    public PageInfo<Article> article_table(@RequestParam(value = "draw",required = true,defaultValue = "0")String draw,
                                           @RequestParam(value = "start",required = true,defaultValue = "0")String start,
                                           @RequestParam(value = "length",required = true,defaultValue = "10")String length){
        //转换为整形
        Integer drawInt = Integer.parseInt(draw);
        Integer startInt = Integer.parseInt(start);
        Integer lengthInt = Integer.parseInt(length);
        //PageInfo为自定义dto对象
        PageInfo<Article> pageInfo = articleService.page(drawInt, startInt, lengthInt);

        return pageInfo;
    }