使用 datatables 插件做后台分页方法
datatables 插件做分页，有两种方式：
（1）后台返回所有数据，在前端分页；
（2）真正意义上的后台分页。
第一种前端分页比较简单，不做介绍，直接看第二种后台分页
html 代码 ：
<table id="dt_travel_list" class="mdl-data-table" cellspacing="0" width="100%"> <thead> <tr> <th>Foryou_id</th> <th>Header Title</th> <th>Title</th> <th>Sub Title</th> <th>Promo Type</th> <th>Content</th> <th>Product_id</th> <th>Promo Photo</th> <th>Operation</th> </tr> </thead> </table>
js 代码 ：
$(document).ready(function() { $('#dt_travel_list').DataTable({//绑定要遍历数据的 table 的 id processing : true,/* 数据加载时显示进度条 */ paging : true,/* 开启分页 */ searching : true,/* 搜索框 */ pageLength : 25,/* 页大小，同时当前页每次加 10，不明白为什么每次增加 10 */ lengthChange : false,/* 是否允许用户改变表格每页显示的记录数 */ serverSide : true,/* 启用服务端分页，如果前端分页，这里为 false */ iDisplayLength : 25,// 不知什么用 pagingType : "full_numbers",//显示分页所有按钮 scrollX : true, autoWidth :true, ordering : false, ajax : { url : "foryouInfoAll", type : "post", data : {}, dataFilter : function(json){ return json; } }, /* 中间遍历的数据 */ columns : [ {data:"id",visible:false},//0 这里可以 {title:"Id编码",data:"id"} //title 列头标题，则可以省略前面 html 代码里面 <table></table> 内的 <tr></tr> 标签！ {data:"header_title"},//1 这里的 header_title 对应后台返回的 bean 的属性值即可自动赋值显示 {data:"title"},// 2 {data:"sub_title"},// 3 {data:"foryou_type"},// 4 {data:null},//5 content//设置为 null ，是为了下面获取该数据后单独做处理，在自定义操作中单独处理！ {data:null,visible:false},//6 product_id (visible:false //隐藏该列) {data:null},//7 {data:null}//8 ], /* 自定义的一些操作 */ columnDefs : [ { //orderable : false,//禁止排序 targets : [5],//对应处理第5列数据！ render : function(data,type,row,meta){ var content = data.content; return "<textarea readonly='readonly' style='width: 100%;height: 100%;'>"+content+"</textarea>"; } }, { //orderable : false,//禁止排序 targets : [6], render : function(data,type,row,meta){ var product_id = data.product_id; if(product_id){ return product_id; }else{ return ""; } } }, { //orderable : false,//禁止排序 targets : [7], render : function(data,type,row,meta){ var imgUrl = data.img_url; return "<img src='"+imgUrl+"' alt='promo photo' width='50px'/>"; } }, { //orderable : false,//禁止排序 targets : [8], render : function(data,type,row,meta){ return "<input type='button' value='update' onclick='backForyou(\""+data.id+"\")'/>"; } } ] }); });
后台代码 ：
import com.fasterxml.jackson.databind.ObjectMapper;
import org.json.JSONObject;
import com.fasterxml.jackson.core.JsonProcessingException;
@RequestMapping(value="/foryouInfoAll", method = RequestMethod.POST,produces = "text/plain;charset=UTF-8") @ResponseBody public Object foryouInfoAll(HttpSession session,HttpServletRequest request,HttpServletResponse response) { /** * 这几个参数后台直接取，前端不需要传! * 开启服务端分页后，datatables 会自动传！ */ Integer draw = Integer.parseInt(request.getParameter("draw"));//该参数取出来，不做任何操作，再传回去即可 Integer start = Integer.parseInt(request.getParameter("start"));//配合求当前页，第一次传进来是 0，然后 10，20，30 …… Integer pageSize = Integer.parseInt(request.getParameter("length"));//【页大小】 Integer nowPage = (start+pageSize)/pageSize;// 转成每次加 1 【当前页】 int total = foryouService.getCount();// 总数量 //自己处理分页逻辑 List<ForYouBean> beans = foryouService.getForYouInfo(nowPage,pageSize); /** * 最重要的格式处理！ * 工具类，处理成 datatable 规定的格式返回，才能正常显示！ */ DataTablePageUtil<ForYouBean> pages = new DataTablePageUtil<>(); pages.setRecordsTotal(total); pages.setRecordsFiltered(total); pages.setDraw(draw); pages.setData(beans); /** * 集合对象转成json数据返回 */ ObjectMapper MAPPER = new ObjectMapper(); String jsonString = MAPPER.writeValueAsString(pages); Object stringToValue = JSONObject.stringToValue(jsonString); System.out.println("==走完后台 foryouInfoAll 方法了=="); return stringToValue; }
工具类（后台必须返回 datatables 要求的数据格式，否则不能正常展示数据，该工具类必须返回的数据有 recordsTotal 和 recordsFiltered 和 data 这3个参数！）：
/** * recordsTotal * recordsFiltered * 这两个字段都是 总数据，具体什么区别不详 */ @Data//提供get，set方法 public class DataTablePageUtil<T> implements Serializable{ private int nowPage;//当前页（当前页和页大小也传可不传，但下面4个必传！） private int pageSize;//页大小 private int draw;//记录数 private long recordsTotal;//总数量 private long recordsFiltered;//总数据 private List<T> data;//要展示的数据 bean }
工具类最后生成的数据格式（如果自己可以拼接成这种格式给前端，可以不用以上的工具类，工具类只是辅助数据处理，但必须符合这种格式才可以让 datatables 正常展示数据）
{
"draw": 1, "recordsTotal": 5, "recordsFiltered": 5, "data": [{ "id": "5ccfe25f84bc103a4c780eff", "title": "00", "header_title": "00", "sub_title": "00", "content": "00", "img_url": "https://xxx/tpc/pb/thumbnail_Capture001.png_3dce77.png", "foryou_type": "inviter" }, { "id": "5cce8d49ee0e371ab31dda1f", "title": "6这是主标题", "header_title": "6这是头部标题", "sub_title": "6这是副标题", "content": "6文字内容吧啦吧啦一大堆！！", "img_url": "https://xxx/tpc/pb/foryou/foryou_medical_card001.png", "product_id": "5ba067dc5fbab3fd0901d400", "foryou_type": "product" }] }
