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 */ lengthChange : false,/* 是否允许用户改变表格每页显示的记录数 */ serverSide : 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},//这里可以 {title:"Id编码",data:"id"} //title 列头标题，则可以省略前面 html 代码里面 <table></table> 内的 <tr></tr> 标签！ {data:"header_title"},//这里的 header_title 对应后台返回的 bean 的属性值即可自动赋值显示 {data:"title"}, {data:"sub_title"}, {data:"foryou_type"}, {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], 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+"\")‘/>"; } } ] }); });
后台代码 ：
@RequestMapping(value="/foryouInfoAll", method = RequestMethod.POST,produces = "text/plain;charset=UTF-8") @ResponseBody public Object foryouInfoAll(HttpSession session,HttpServletRequest request,HttpServletResponse response) { System.out.println("==进来后台 foryouInfoAll 方法了=="); List<ForYouEntity> forYouAll = foryouService.getForYouAll(); List<ProductsEntity> products = travelProductService.findProductAll(); int total = forYouAll.size(); List<ForYouBean> beans = new ArrayList<>(); for (ForYouEntity f : forYouAll) { ForYouBean bean = new ForYouBean(); bean.setId(f.getId().toString()); bean.setHeader_title(f.getHeader_title()); bean.setTitle(f.getTitle()); bean.setSub_title(f.getSub_title()); Integer promo_type = f.getPromo_type(); if(promo_type == DBStatusUtils.ForYouPromoType.INVITER.getValue()) { bean.setForyou_type(DBStatusUtils.ForYouPromoType.INVITER.getString()); }else { //具体关联的产品名 String foryou_product_id = f.getProduct_id().toString(); for (ProductsEntity product : products) { String product_id = product.getId().toString(); if(foryou_product_id.equals(product_id)) { bean.setForyou_type(product.getName_tc()); bean.setProduct_id(f.getProduct_id().toString()); break; } } } bean.setContent(f.getContent()); bean.setImg_url(urlDomain+ver3BannerPath+f.getImg_name()); beans.add(bean); } //工具类，处理成 datatable 规定的格式返回，才能正常显示！ DataTablePageUtil<ForYouBean> pages = new DataTablePageUtil<>(); pages.setRecordsTotal(total); pages.setRecordsFiltered(total); pages.setDraw(1); pages.setData(beans); //集合对象转成json数据 String jsonString = JsonUtils.objectToJson(pages); Object stringToValue = JSONObject.stringToValue(jsonString); System.out.println("==走完后台 foryouInfoAll 方法了=="); return stringToValue; }
工具类（后台必须返回 datatables 要求的数据格式，否则不能正常展示数据，该工具类必须返回的数据有 recordsTotal 和 recordsFiltered 和 data 这3个参数！）：
/** * recordsTotal * recordsFiltered * 这两个字段都是 总数据，具体什么区别不详 */ @Data public class DataTablePageUtil<T> implements Serializable{ private int nowPage;//当前页 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" }] }
第二种后台分页：
原文：https://www.cnblogs.com/xuehuashanghe/p/10825797.html