JQuery DataTables JS + Spring MVC 动态分页使用例子。

2019独角兽企业重金招聘Python工程师标准>>>

我在网上找到的关于 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 有多少列 返回的数据 也要有多少列。

希望各位大神指点。

转载于:https://my.oschina.net/u/218308/blog/412765