JQuery Datatable 示例

JQuery Datatable 简介

本博客代码下载地址：下载代码

服务器端

创建Maven项目，导入jquery datatable相关文件在这里插入图片描述

Maven依赖


    junit
    junit
    4.12


    mysql
    mysql-connector-java
    8.0.18


    javax
    javaee-api
    8.0.1


    com.alibaba
    fastjson
    1.2.62

数据库脚本

CREATE TABLE `tb_dept`  (
  `deptno` tinyint(2) UNSIGNED NOT NULL  COMMENT '部门编号',
  `dname` varchar(14) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '部门名称',
  `loc` varchar(13) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '部门地址',
  PRIMARY KEY (`deptno`) USING BTREE
) ENGINE = InnoDB  CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

Dept.java

public class Dept {
    private Integer deptno;
    private String dname;
    private String loc;
    //……getter/setter、默认构造方法、全参构造方法
}

DBUtil.java

public final class DBUtil {
    private static final String url = "jdbc:mysql://localhost:3306/db_test?useSSL=false&serverTimezone=GMT%2B8";//连接字符串
    private static final String name = "root";    //用户名
    private static final String pass = "root"; //密码

    static {// 1、加载驱动
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            throw new ExceptionInInitializerError(e);
        }
    }

    public static Connection getConnection() throws SQLException {
        return DriverManager.getConnection(url, name, pass);
    }
     public static void free(ResultSet rs, Statement stmt, Connection conn) {
        try { // 建议采用这种形式来释放资源，因为finally里面的一定会被释放
            if (rs != null) {
                rs.close();
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try {
                if (stmt != null) {
                    stmt.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            } finally {
                if (conn != null) {
                    try {
                        conn.close();
                    } catch (SQLException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
    }
}

内存假分页 DeptService.java

@WebServlet(urlPatterns = "/dept3")
public class DeptServlet3 extends HttpServlet {
    private DeptService deptService = new DeptService();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        PrintWriter out = resp.getWriter();

        List depts = null;
        try {
            depts = deptService.getAll();   //一次性查询出来全部数据，适用于数据量小的情况，Datatable可以做内存分页
        } catch (SQLException e) {
            e.printStackTrace();
        }
        String json = JSON.toJSONString(depts);
        String res = "{\"data\":" + json + "}";
        System.out.println(res);
        out.write(res);
        out.flush();
    }
}

服务器端返回数据格式

{
    "data": [
        {
            "deptno": 1,
            "dname": "4294-83cf",
            "loc": "4bbf-9696"
        },
        {
            "deptno": 2,
            "dname": "4685-8e72",
            "loc": "4662-8eaa"
        },
        {
            "deptno": 3,
            "dname": "49ff-95c2",
            "loc": "488c-a126"
        },
        {
            "deptno": 4,
            "dname": "4ae7-9cb2",
            "loc": "47d0-8340"
        },
        {
            "deptno": 5,
            "dname": "45da-9b17",
            "loc": "4060-8ba0"
        },
        {
            "deptno": 6,
            "dname": "4599-85a7",
            "loc": "4559-8f52"
        }
    ]
}

页面实现一

DOCTYPE html>

    
        
        
        
        
        
        
        DataTables example
    

    
        
        
            $(function () {
                $('#example').DataTable({
                    "ajax":  "dept3",
                    "columns": [  //不带title时表格在显示时就没有标题了
                        {"title": "部门编号", "data": "deptno"},
                        {"title": "部门名称", "data": "dname"},
                        {"title": "部门地址", "data": "loc"}
                    ]
                });
            });

效果在这里插入图片描述

页面实现二

DOCTYPE html>

    
        
        
        
        
        
        
        DataTables example
    

    
        
        
            $(function () {
                $('#example').DataTable({
                    "processing": true, //加载效果
                    "ajax": {
                        url: "dept3",
                        "type": "get"
                    },
                    "columns": [  //不带title时表格在显示时就没有标题了
                        {"title": "部门编号", "data": "deptno"},
                        {"title": "部门名称", "data": "dname","bSortable":false},//不允许排序
                        {"title": "部门地址", "data": "loc"}
                    ],
                    "oLanguage": {//下面是一些汉语翻译
                        "sSearch": "搜索",
                        "sLengthMenu": "每页显示 _MENU_ 条记录",
                        "sZeroRecords": "没有检索到数据",
                        "sInfo": "显示 _START_ 至 _END_ 条   共 _TOTAL_ 条",
                        "sInfoFiltered": "(筛选自 _MAX_ 条数据)",
                        "sInfoEmtpy": "没有数据",
                        "sProcessing": "正在加载数据...",
                        "sProcessing": "", //这里是给服务器发请求后到等待时间显示的加载gif
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "前一页",
                            "sNext": "后一页",
                            "sLast": "末页"
                        }
                    },
                    "aoColumnDefs": [//和aoColums类似，可以给指定列附加属性
                        {"bSortable": false, "aTargets": [2]},  //第1,3列（从0开始算） 不能排序
                        {"bSearchable": false, "aTargets": [0, 1]}, //是否可以全局搜索，在服务器端分页中是没用的
                    ],
                    "aaSorting": [[1, "desc"]], //第1列倒序排序(从第0列开始)
                });
            });

效果：在这里插入图片描述

服务器端真分页实现一服务器端代码

@WebServlet(urlPatterns = "/dept4")
public class DeptServlet4 extends HttpServlet {
    private DeptService deptService = new DeptService();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        PrintWriter out = resp.getWriter();
        try {
            getWithPage(req, out);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        out.flush();
    }

    private void getWithPage(HttpServletRequest req, PrintWriter out) throws SQLException {
        String sEcho = "";//请求次数
        String sSearch = ""; //搜索字符患上
        int pageNum = 1; //当前页页码
        int pageSize = 10;//每页显示数据条数

        String params = req.getParameter("aoData");
        System.out.println(params);
        JSONArray array = JSONArray.parseArray(params);
        //这里获取从前台传递过来的参数，从而确保是否分页、是否进行查询、是否排序等
        for (int i = 0; i DOCTYPE html>

    
        
        
        
        
        
        
        DataTables example
    
    
        
            
                
                    部门编号
                    部门名称
                    部门地址
                
            
            
            
        
        
            $(document).ready(function () {
                $("#tb").dataTable({
                    "bPaginate": true, //翻页功能
                    "bLengthChange": true, //改变每页显示数据数量
                    "bFilter": true, //过滤功能
                    "bSort": false, //排序功能
                    "bInfo": true,//页脚信息
                    "bAutoWidth": true,//自动宽度
                    "bProcessing": true,//是否显示取数据时的正在加载中……提示，特别是大数据量的时候，开启此功能比较好
                    "bServerSide": true,//开启服务器模式，使用服务器端处理配置datatable。开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。
                    "sAjaxSource": "dept4",//这个是请求的地址
                    "fnServerData": retrieveData//获取数据的处理函数
                });
            });

            //3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
            function retrieveData(sSource, aoData, fnCallback) {
                $.ajax({
                    url: sSource,//这个就是请求地址对应sAjaxSource
                    data: {"aoData": JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数,分页,排序,查询等的值
                    type: 'post',
                    dataType: 'json',
                    async: false,
                    success: function (result) {
                        fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
                    },
                    error: function (msg) {
                    }
                });
            }

效果：

在这里插入图片描述

实现二服务器端代码

@WebServlet(urlPatterns = "/dept5")
public class DeptServlet5 extends HttpServlet {
    private DeptService deptService = new DeptService();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        PrintWriter out = resp.getWriter();
        try {
            getWithPage(req, out);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        out.flush();
    }

    private void getWithPage(HttpServletRequest req, PrintWriter out) throws SQLException {
        String sEcho = "";//请求次数
        String sSearch = ""; //搜索字符患上
        int pageNum = 1; //当前页页码
        int pageSize = 10;//每页显示数据条数

        String params = req.getParameter("aoData");
        System.out.println(params);
        JSONArray array = JSONArray.parseArray(params);
        //这里获取从前台传递过来的参数，从而确保是否分页、是否进行查询、是否排序等
        for (int i = 0; i DOCTYPE html>

    
        
        
        
        
        
        
        DataTables example
    
    
        
            
                
                    部门编号
                    部门名称
                    部门地址
                
            
            
            
        
        
            $(document).ready(function () {
                $("#tb").dataTable({
                    "bProcessing": false,//是否显示取数据时的那个等待提示
                    "bServerSide": true,//这个用来指明是通过服务端来取数据
                    "sAjaxSource": "dept5",//给服务器发请求的url
                    "fnServerData": retrieveData,//获取数据的处理函数
                    "oLanguage": {//下面是一些汉语翻译
                        "sSearch": "搜索",
                        "sLengthMenu": "每页显示 _MENU_ 条记录",
                        "sZeroRecords": "没有检索到数据",
                        "sInfo": "显示 _START_ 至 _END_ 条   共 _TOTAL_ 条",
                        "sInfoFiltered": "(筛选自 _MAX_ 条数据)",
                        "sInfoEmtpy": "没有数据",
                        "sProcessing": "正在加载数据...",
                        "sProcessing": "", //这里是给服务器发请求后到等待时间显示的加载gif
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "前一页",
                            "sNext": "后一页",
                            "sLast": "末页"
                        }
                    },
                    "aoColumns": [ //这个属性下的设置会应用到所有列，按顺序没有是空
                        {"mData": 'deptno'}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
                        {"mData": 'dname'},
                        {"mData": 'loc'}
                    ]
                });
            });

            //3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
            function retrieveData(sSource, aoData, fnCallback) {
                $.ajax({
                    url: sSource,//这个就是请求地址对应sAjaxSource
                    data: {"aoData": JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数,分页,排序,查询等的值
                    type: 'post',  //使用Post方式传递数据
                    dataType: 'json',
                    async: false,
                    success: function (result) {
                        fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
                    },
                    error: function (msg) {
                    }
                });
            }

效果：

在这里插入图片描述

实现三封装服务器端返回数据的实体类

public class DataTable2 {
    private Integer draw;
    private Integer recordsTotal; //也可以是Integer类型
    private Integer recordsFiltered;//也可以是Integer类型
    private List data;
    //……getter/setter、默认构造方法、全参构造方法
}

服务器端代码

@WebServlet(urlPatterns = "/dept7")
public class DeptServlet7 extends HttpServlet {

    private DeptService deptService = new DeptService();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        PrintWriter out = resp.getWriter();
        try {
            getWithPage(req, out);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        out.flush();
    }

    private void getWithPage(HttpServletRequest req, PrintWriter out) throws SQLException {
        int sEcho = 1;//请求次数
        String sSearch = ""; //搜索字符患上
        int pageNum = 1; //当前页页码
        int pageSize = 10;//每页显示数据条数

        String params = req.getParameter("aoData");
        System.out.println(params);
        JSONArray array = JSONArray.parseArray(params);
        //这里获取从前台传递过来的参数，从而确保是否分页、是否进行查询、是否排序等
        for (int i = 0; i DOCTYPE html>

    
        
        
        
        
        
        
        DataTables example
    
    
        
            
                
                    部门编号
                    部门名称
                    部门地址
                
            
            
            
        
        
            let table = $("#tb").dataTable({
                "bProcessing": false,//是否显示取数据时的那个等待提示
                "bServerSide": true,//这个用来指明是通过服务端来取数据
                "sAjaxSource": "dept7",//给服务器发请求的url
                "fnServerData": retrieveData,//获取数据的处理函数
                "aoColumns": [ //这个属性下的设置会应用到所有列，按顺序没有是空
                    {"mData": 'deptno'}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
                    {"mData": 'dname'},
                    {"mData": 'loc'}
                ]
            });

            //3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
            function retrieveData(sSource, aoData, fnCallback) {
                $.ajax({
                    url: sSource,//这个就是请求地址对应sAjaxSource
                    data: {"aoData": JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数,分页,排序,查询等的值
                    type: 'post',  //使用Post方式传递数据
                    dataType: 'json',
                    async: true,
                    success: function (result) {
                        fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
                    },
                    error: function (msg) {
                    }
                });
            }

            //点击某行后高亮
            $('#tb').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                } else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });

效果

在这里插入图片描述

JQuery Datatable 示例

最近更新

热门博客

[ 申请 ]友情链接：