Jquery DataTable实现ajax动态分页加载数据实战

实现技术要点：Spring MVC，jquery dataTable

具体代码：

1.controller类

package cn.luhui.wiseaqua.controller;
 
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List; 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody; 
 
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

@Controller
@RequestMapping("/demo")
public class DemoController {
   
 
    // 测试案例
    @RequestMapping("tableDemoAjax")
    @ResponseBody
    public String tableDemoAjax(@RequestParam String aoData) { 
        JSONArray jsonarray = JSONArray.parseArray(aoData); // .fromObject(aoData);
        
        // 生成20条测试数据
        List<String[]> lst = new ArrayList<String[]>();
        String sEcho = null;
        String sSearch = null; // 搜索
        int iDisplayStart = 0; // 起始索引
        int iDisplayLength = 0; // 每页显示的行数 
        int total = 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.getIntValue("value");
            } 
            if (obj.get("name").equals("iDisplayLength"))
            {
                  iDisplayLength = obj.getIntValue("value");
            }
            if (obj.get("name").equals("sSearch"))
            {
                sSearch = obj.getString("value");
            } 
        } 
      for (int i = 0; i < 20; i++) {
        String[] d = { "co1_data" + i, "col2_data" + i };
        lst.add(d);
     } 
       // 执行搜索，把不属于关键字部分内容remove掉
       if(sSearch != null  && !sSearch.equals(""))
       {
           Iterator it = lst.iterator();
           while(it.hasNext())
           {
               String[] s = (String[])it.next();
               if(!s[0].contains(sSearch) || !s[1].contains(sSearch))
               {
                   it.remove();
               } 
           }
       } 
        total = lst.size();
        JSONObject getObj = new JSONObject();
        getObj.put("sEcho", sEcho);// 不知道这个值有什么用,有知道的请告知一下
        getObj.put("iTotalRecords", lst.size());//实际的行数
        getObj.put("iTotalDisplayRecords", lst.size());//显示的行数,这个要和上面写的一样

        System.out.println("------"+ sEcho+ ",total：" + total   + 
                                    ", pageSize："+iDisplayLength+"," +
                                    "----------iDisplayStart:" + iDisplayStart +
                                    "---------\n" + aoData);
        if(iDisplayLength < total)
        {
                   getObj.put("aaData", lst.subList(iDisplayStart,iDisplayStart + iDisplayLength));//要以JSON格式返回 
        }else{
                    getObj.put("aaData", lst);//要以JSON格式返回
        }
        return getObj.toString();
    }
    
     
}

2.jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
  
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
 
<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>
     <link rel="stylesheet" type="text/css" href="./media/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="../media/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="../media/demo.css">
    </head>
    
 
 
<body class="dt-example">
    <div class="container">
    <table id="tb" class="display">
        <thead>
            <tr>
                <th>col1</th>
                <th>col2</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
     
    <script type="text/javascript" src="media/js/jquery.js"></script>
    <script type="text/javascript" src="media/js/jquery.dataTables.js"></script>
     
    <script type="text/javascript">
        $(document).ready(function() {
            $("#tb").dataTable({  
                "bProcessing": false, // 是否显示取数据时的那个等待提示
                "bServerSide": true,//这个用来指明是通过服务端来取数据
                "sAjaxSource": "demo/tableDemoAjax.do",//这个是请求的地址
                "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) {
                   aler("ajax Error");
                }
            });
        }
    </script>
    </div>
    </body>
   </html>