憋了好几天看了中文和英文的文档，终于把分页搞出来了，先前一直纠结这个页码和页容量怎么传的，其实不用纠结这个，会自动识别。
服务器分页参考文档：http://www.datatables.club/manual/server-side.html
首先页面HTML
<table class="table table-striped table-bordered table-hover" id="item-table"> <thead> <tr> <th width="25px"><label><input type="checkbox" class="ace"/><span class="lbl"></span></label></th> <th width="200px">商品编号</th> <th width="250px">商品名称</th> <th width="120px">商品类型</th> <th width="120px">价格</th> <th width="120px">库存数量</th> <th width="120px">条码</th> <th width="180px">店铺名称</th> <th width="240px">创建时间</th> <th width="240px">更新时间</th> <th width="70px">状态</th> <th width="240px">操作</th> </tr> </thead> <tbody> </tbody> </table>
js代码：这部分比较重要
jQuery(function($) { $('#item-table').DataTable( { "ordering": false,//排序 关闭 "searching":false,//搜索关闭 "pagingType": "full_numbers",//分页样式 这个显示的首页，上一页，下一页，尾页 "bAutoWidth": true, //自动调整宽度 "stateSave": false,//缓存 感觉没起上作用，不知道怎么用 "processing": true,//显示搜索进程 "serverSide": true,//服务器端分页，一定要写 ajax : { url : "item/list", //你请求的url路径 }, "columns": [ //页面数据返回处理 {render : function(data, type, row, meta) { return "<label><input type=\"checkbox\" class=\"ace\"/><span class=\"lbl\"></span></label>"; } }, {data: "id" }, {data: "title"}, { data: "gid", render: function (data, type, row, meta) { if(data==1){ return "商品类型1"; }else if (data==2){ return "商品类型2"; }else if (data==0){ return "商品类型3"; }else{ return "未知"; } } }, { data: "price", render: function (data, type, row, meta) { return (data*1000/1000).toFixed(2);//格式化钱数，保留两位小数 } }, { data: "num"}, { data: "barcode" }, { data: "sname" }, { data: "created", "render" : function(data, type, full, meta) { //时间格式化 需要引入<script type="text/javascript" src="../js/date-time/moment.min.js" ></script> return moment(data).format("YYYY-MM-DD HH:mm:ss"); } }, { data: "updated", "render" : function(data, type, full, meta) { //时间格式化 return moment(data).format("YYYY-MM-DD HH:mm:ss"); } }, { data: "status", render: function (data, type, row, meta) { if(data==0){ return "<span class=\"label label-danger radius\">禁用</span>"; }else if (data==1){ return "<span class=\"label label-success radius\">正常</span>"; }else if (data==2){ return "<span class=\"label label-warning radius\">下架</span>"; }else if(data==3){ return "<span class=\"label label-default radius\">删除</span>"; }else{ return "<span class=\"label label-secondary radius\">未知</span>"; } } } ], "columnDefs" : [ { // 定义操作列,######以下是重点######## "targets" : 11,//操作按钮目标列 "data" : null, "render" : function(data, type,row) { var id = '"' + row.id + '"'; var html = "<a href='javascript:void(0);' onclick='forbiddenThisRowItem("+ id + ")' class='btn btn-xs btn-danger'><i class='icon-stop bigger-90'></i>禁用 </a> " html += "<a href='javascript:void(0);' onclick='editThisRowItem("+ id + ")' class='btn btn-xs btn-info'><i class='icon-edit bigger-90'></i>编辑</a> " html += "<a href='javascript:void(0);' onclick='deleteThisRowItem("+ id + ")' class='btn btn-xs btn-warning'><i class='icon-trash bigger-90'></i>删除</a> " return html; } } ] } ); })
还有一个js，就是网上的那个中文显示，不然显示的是英文的
//http://datatables.net/plug-ins/pagination#bootstrap $.extend( true, $.fn.dataTable.defaults, { "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>", "sPaginationType": "bootstrap", "oLanguage": { "sLengthMenu": "Display _MENU_ records" } } ); (function(){ var oLanguage={ "oPaginate": { "sFirst": "首页", "sLast": "末页", "sNext": "下一页", "sPrevious": "上一页" }, "sEmptyTable": "没有相关记录", "sInfo": "第 _START_ 到 _END_ 条记录，共 _TOTAL_ 条", "sInfoEmpty": "第 0 到 0 条记录，共 0 条", "sInfoFiltered": "(从 _MAX_ 条记录中检索)", "sInfoPostFix": "", "sDecimal": "", "sThousands": ",", "sLengthMenu": "每页显示条数: _MENU_", "sLoadingRecords": "正在载入...", "sProcessing": "正在载入...", "sSearch": "搜索:", "sSearchPlaceholder": "", "sUrl": "", "sZeroRecords": "没有相关记录" } //$.fn.dataTable.defaults.oLanguage=oLanguage; $.extend($.fn.dataTable.defaults.oLanguage,oLanguage) })();
java代码就比较简单了
实现类用了pagerhelper分页如需jar，请联系我
public DataTableResult queryItem(int page, int rows) { PageHelper.startPage(page, rows); TbItemExample example=new TbItemExample(); List<TbItem> itemList = tbItemMapper.selectByExample(example); DataTableResult result=new DataTableResult(); result.setData(itemList); PageInfo<TbItem> info=new PageInfo<>(itemList); result.setRecordsTotal((int) info.getTotal()); result.setRecordsFiltered((int) info.getTotal()); return result; }
Controller
public DataTableResult getItemList(HttpServletRequest request){ int draw =Integer.parseInt(request.getParameter("draw")); int start = Integer.parseInt(request.getParameter("start")); int length = Integer.parseInt(request.getParameter("length")); int page=1; if(start==0) { page=1; }else { page=start/length+1; } DataTableResult result = itemService.queryItem(page, length); result.setDraw(draw); return result; }
封装的类
public class DataTableResult { private int draw;//绘制计数器 private int recordsTotal;//没有过滤的记录数 private int recordsFiltered;//过滤后的记录数 private List<?> data;//返回数据 省略 getter ,setter }
mapper就是逆向工程生成的mapper如需要，请联系我。
自定义搜索和批量删除请参考本人另一篇博客
https://blog.csdn.net/weixin_39555954/article/details/83543784
