前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到教程。

效果：

我這個表格數據 比較少沒有第2頁

有多例多頁的效果（帶滾動條和翻頁）：

?

?

1. ?jsp頁面：

表格聲明部分：

?

<div class="row"><div class="col-md-12 col-sm-12 col-xs-12"><div class="x_panel"><div class="x_title"><h2>權限角色管理 </h2><ul class="nav navbar-right panel_toolbox"><li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li><li><a href="javascript:void(0);" id="add"><i class="fa fa-plus"></i></a></li></ul><div class="clearfix"></div></div><div class="x_content"><div class="form-inline"><label>角色名稱：<input id="theRoleName" type="text" class="form-control input-sm" placeholder="輸入角色名稱" style="width: 100px;"></label>???<button class="btn btn-success btn-sm" style="margin-bottom:0;" onclick="javascript: myTable.ajax.url('system/getAuthRoleList').load();"><i class="fa fa-search">查詢</i></button><button class="btn btn-info btn-sm" style="margin-bottom:0;" onclick="reset();"><i class="fa fa-undo">重置</i></button></div><table id="datatable" class="table table-striped table-bordered"><thead><tr><th width="120px">序號</th><th width="340px">角色名稱</th><th width="440px">角色資源字串</th><th>操作</th></tr></thead></table></div></div></div></div>

表格初始化部分：

?

頁面加載的時候 會自動初始化表格，從后端查出數據裝入表中。

?

<!-- 分頁相關JS --><script src="css/vendors/datatables.net/js/jquery.dataTables.min.js"></script><script src="css/vendors/datatables.net-bs/js/dataTables.bootstrap.js"></script><script type="text/javascript">var myTable$(function() {//初始化表格對象myTable = $('#datatable').DataTable({dom: 'irtlp',searching: false,processing: true,serverSide: true,paging: true,info: true,scrollX: true, //列太多，超過顯示長度需要滾動條時使用ajax: {url: "system/getAuthRoleList",// 數據請求地址type: "POST",data: function (params) {//此處為定義查詢條件 傳給控制器的參數//角色名稱params.roleName = $("#theRoleName").val()}},columns: [{ data: "id" },{ data: "roleName" },{ data: "resourcesIds" }],columnDefs: [{targets: 3,// 操作例的位置，從0開始數為第幾例，data: "id",width: 140,"render": function(data, type, full){return "<a id='upd' class='btn btn-info btn-xs'><i class='fa fa-pencil'></i>修改權限</a>"+ "<button class='btn btn-danger btn-xs' onclick='deleteRoleRes("+data+")'><i class='fa fa-remove'></i>?刪除</button>"}}],language: {url: "css/vendors/language-zh.json"}}); <!-- 分頁相關JS --><script src="css/vendors/datatables.net/js/jquery.dataTables.min.js"></script><script src="css/vendors/datatables.net-bs/js/dataTables.bootstrap.js"></script><script type="text/javascript">var myTable$(function() {//初始化表格對象myTable = $('#datatable').DataTable({dom: 'irtlp',searching: false,processing: true,serverSide: true,paging: true,info: true,scrollX: true, //列太多，超過顯示長度需要滾動條時使用ajax: {url: "system/getAuthRoleList",// 數據請求地址type: "POST",data: function (params) {//此處為定義查詢條件 傳給控制器的參數//角色名稱params.roleName = $("#theRoleName").val()}},columns: [{ data: "id" },{ data: "roleName" },{ data: "resourcesIds" }],columnDefs: [{targets: 3,// 操作例的位置，從0開始數為第幾例，data: "id",width: 140,"render": function(data, type, full){return "<a id='upd' class='btn btn-info btn-xs'><i class='fa fa-pencil'></i>修改權限</a>"+ "<button class='btn btn-danger btn-xs' οnclick='deleteRoleRes("+data+")'><i class='fa fa-remove'></i>?刪除</button>"}}],language: {url: "css/vendors/language-zh.json"}});

?

?

?

?

?

2. ?通過 數據請求地址 找到對應的控制器方法：

參數： ?draw ： 不用管?

?start ： ?從第N條開始

?length ： ?每頁顯示N條

?roleName ?：查詢條件（此處是一個角色表，用于查詢角色名為N的結果）

?

返回的參數：recordsTotal、recordsFiltered ?都是結果集總記錄數。data：結果集。draw：原樣返回。

?

?

/*** 加載權限角色列表* @param draw* @param start* @param length* @param roleName* @return* @throws Exception*/@ResponseBody@RequestMapping("/getAuthRoleList")public Object getAuthRoleList(int draw, int start, int length, String roleName)throws Exception{_logger.info("＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋　 展示權限角色列表 ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ ");PageInfo<AuthRole> pageInfo = _authRoleService.selectAuthRoleByPage((start/length)+1, length, roleName);Map<String, Object> map = new HashMap<String, Object>();List<Object> data = new ArrayList<Object>();for(AuthRole res : pageInfo.getList()){Map<String, Object> obj = new HashMap<String, Object>();obj.put("id", res.getId());obj.put("roleName", res.getRoleName());obj.put("resourcesIds", res.getResourcesIds());data.add(obj);}map.put("draw", draw);map.put("recordsTotal", pageInfo.getTotal());map.put("recordsFiltered", pageInfo.getTotal());map.put("data", data);return map;}

?

?

只要把后端數據查出來，處理為要求的json格式數據返回給datatable就是了。

我的代碼分頁有用pagehelper分頁插件。可以不用插件自己寫分頁sql一樣的。只要返回的數據格式對了，datatable就能解析。

?

3.pageHelper的用法 ：http://blog.csdn.net/jiangyu1013/article/details/56287388點擊打開鏈接

?

?

?

?

?

總結

以上是生活随笔為你收集整理的Jquery Datatable的使用样例（ssm+bootstrsp框架下）服务器端分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。