憋了好几天看了中文和英文的文档，终于把分页搞出来了，先前一直纠结这个页码和页容量怎么传的，其实不用纠结这个，会自动识别。
服务器分页参考文档：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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/18570.html
