JQuery DataTables JS + Spring MVC 動態分頁使用例子。

我在網上找到的關於 JQuery DataTables JS 插件動態分頁的例子比較少，我正好也用到了這個功能，但願對你們有幫助。
寫的很差，多指點。

上代碼

<link href="<%=basePath%>common/plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<script src="<%=basePath%>common/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="<%=basePath%>common/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
<script src="<%=basePath%>common/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
 
$(function () {
        $("#example2").dataTable({
         "bLengthChange": false,
         "bFilter": false,
         "bSort": false,
         "bInfo": true,
         "bProcessing": true, // 加載條
         "iDisplayLength": 10,
         "bProcessing": false, // 是否顯示取數據時的那個等待提示
         "bServerSide": true,//這個用來指明是經過服務端來取數據
         "sAjaxSource": <%=basePath%>admin/pushmessages/msglist",//這個是請求的地址

            "fnServerData": retrieveData, // 獲取數據的處理函數

   "oLanguage": {

    "sProcessing": "正在加載中......",

    "sLengthMenu": "每頁顯示 _MENU_ 條記錄",

                "sZeroRecords": "對不起，查詢不到相關數據！",

                "sEmptyTable": "表中無數據存在！",

                "sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",

                "sInfoFiltered": "數據表中共爲 _MAX_ 條記錄",

    "oPaginate": {

                    "sFirst": "首頁",

                    "sPrevious": "上一頁",

                    "sNext": "下一頁",

                    "sLast": "末頁",

                },

   },

  });

 });

  

   // 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) {

                }

            });

        } 

<div class="box-body">

                  <table id="msgtable" class="table table-bordered table-striped table-hover">

                    <thead>

                      <tr>

                        <th>標題</th>

                        <th>內容</th>

      <th>推送時間</th>

      <th>推送方式</th>

                        <th>推送者</th>

                      </tr>

                    </thead>

     

                    <tbody>

                    </tbody>

     

                  </table>

                </div>

以上就是前臺部分

Spring Action

import net.sf.json.JSONArray;
import net.sf.json.JSONObject; 
 @RequestMapping(value = "/msglist", method = RequestMethod.POST)
 @ResponseBody
 public String msgList(@RequestParam String aoData,HttpServletRequest request) {
   
  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");
     }
     
     Integer conut = pushMessagesService.count(" 1=:id ", 1);
     
     JSONObject getObj = new JSONObject();
     getObj.put("sEcho", sEcho);// 不知道這個值有什麼用,有知道的請告知一下
     getObj.put("iTotalRecords", conut);//實際的行數
     getObj.put("iTotalDisplayRecords", conut);//顯示的行數,這個要和上面寫的同樣
      
     getObj.put("aaData", pushMessagesService.getPMsgListTable(iDisplayStart, iDisplayLength));//要以JSON格式返回
           
     return getObj.toString();
 }

service

public List<String[]> getPMsgListTable(Integer pageIndex, Integer pageSize ){

  List<PushMessages> list = pushMessagesDao.getUserListTable(pageIndex, pageSize);

  ArrayList<String[]> lists = new ArrayList<String[]>();

     for (int i = 0; i < list.size(); i++) {

      lists.add(list.get(i).toStringArray());

     }
     return lists;

 }

bean

@Entity
@Table
public class PushMessages implements Serializable{
 private static final long serialVersionUID = -7569928120760123739L;
 
 private Integer id;
 private String title; // 標題
 private String content; // 內容 72個字
 private Integer type; // 0:因此平臺 ,1:ios,2:android
 private String sendtime;
 private Integer user_id;
 private String user_name;
 
    getr setr .... 
 
 public String[] toStringArray() {

  //<button class="btn btn-block btn-primary disabled btn-sm">支付寶</button>

  StringBuffer button = new StringBuffer("<button class='btn disabled btn-sm ");

  if (type == 0) 
   button.append("btn-primary'>全平臺");

  if (type == 1) 
   button.append("btn-warning'>IOS");

  if (type == 2) 
   button.append("btn-success'>Android");
 
  button.append("</button>");

  String [] str ={title,content,sendtime,button.toString(),user_name};

  return str;

 }
}

返回到 jquery datatables 的數據格式  是一個 String [] 數組, 因此我在 這個 bean 裏面寫了一個 toStringArray() 方法 拼接成 String 數組 同時也把 html 代碼拼接在 裏面

能夠用firedub 看下數據返回的格式。

還有一點，html 有多少列 返回的數據 也要有多少列。

但願各位大神指點。