springmvc + jquery datatable + ajax实现动态分页查询

桃扇骨 2022-08-20 04:18 267阅读 0赞

网上关于jquery datatable的例子很多,但结合springmvc的例子很少,搞了2天才把这个弄明白,现在记录下来,作为学习笔记。

1.导入所需文件

(1) jquery.dataTables.css

(2) jquery.js

(3) jquery.dataTables.js

2.datatable.[jsp][]

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
     
     
     
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
    <title>listView</title>
     
     
     
        <table id="tb" class="display">
            <thead>
                <tr>
                    <th>col1</th>
                    <th>col2</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
         
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.dataTables.js"></script>
         
        <script type="text/javascript">
            $(document).ready(function() {
                $("#tb").dataTable({  
                    "bProcessing": false, // 是否显示取数据时的那个等待提示
                    "bServerSide": true,//这个用来指明是通过服务端来取数据
                    "sAjaxSource": "tableDemoAjax.html",//这个是请求的地址
                    "fnServerData": retrieveData // 获取数据的处理函数
                });
            });
             
            // 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
            function retrieveData( sSource111,aoData111, fnCallback111) {
                $.ajax({
                    url : sSource111,//这个就是请求地址对应sAjaxSource
                    data : {"aoData":JSON.stringify(aoData111)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
                    type : 'post',
                    dataType : 'json',
                    async : false,
                    success : function(result) {
                        fnCallback111(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
                    },
                    error : function(msg) {
                    }
                });
            }
        </script>

3.后台请求地址tableDemoAjax

@RequestMapping("tableDemoAjax")
    @ResponseBody
    public String tableDemoAjax(@RequestParam String aoData) {
     
        JSONArray jsonarray = JSONArray.fromObject(aoData);
     
        String sEcho = null;
        int iDisplayStart = 0; // 起始索引
        int iDisplayLength = 0; // 每页显示的行数
     
        for (int i = 0; i < jsonarray.size(); i++) {
            JSONObject obj = (JSONObject) jsonarray.get(i);
            if (obj.get("name").equals("sEcho"))
                sEcho = obj.get("value").toString();
     
            if (obj.get("name").equals("iDisplayStart"))
                iDisplayStart = obj.getInt("value");
     
            if (obj.get("name").equals("iDisplayLength"))
                iDisplayLength = obj.getInt("value");
        }
     
        // 生成20条测试数据
        List<string[]> lst = new ArrayList<string[]>();
        for (int i = 0; i < 20; i++) {
            String[] d = { "co1_data" + i, "col2_data" + i };
            lst.add(d);
        }
         
        JSONObject getObj = new JSONObject();
        getObj.put("sEcho", sEcho);// 不知道这个值有什么用,有知道的请告知一下
        getObj.put("iTotalRecords", lst.size());//实际的行数
        getObj.put("iTotalDisplayRecords", lst.size());//显示的行数,这个要和上面写的一样
         
        getObj.put("aaData", lst.subList(iDisplayStart,iDisplayStart + iDisplayLength));//要以JSON格式返回
        return getObj.toString();
    }</string[]></string[]>

[jsp]: http://www.2cto.com/kf/web/jsp/