我在網上找到的關於 JQuery DataTables JS 插件動態分頁的例子比較少,我正好也用到了這個功能,但願對你們有幫助。
寫的很差,多指點。javascript
上代碼css
<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>
以上就是前臺部分html
Spring Actionjava
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(); }
servicejquery
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; }
beanandroid
@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 代碼拼接在 裏面ios
能夠用firedub 看下數據返回的格式。ajax
還有一點,html 有多少列 返回的數據 也要有多少列。json
但願各位大神指點。bootstrap