datatables+java实现服务器端分页，排序，查询，列的显示影藏
现在人工智能非常火爆，很多朋友都想学，但是一般的教程都是为博硕生准备的，太难看懂了。最近发现了一个非常适合小白入门的教程，不仅通俗易懂而且还很风趣幽默。所以忍不住分享一下给大家。点这里可以跳转到教程。
最近看了下datatables，模仿写了一个小例子，和大家分享一下。效果图如下
jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
快递公司列表
编号
名称
状态
电话
网址
操作
其余js和css都是datatables官方提供deconstant.js代码/*常量*/
var CONSTANT = {
DATA_TABLES : {
DEFAULT_OPTION : { //DataTables初始化选项
language: {
"sProcessing": "处理中...",
"sLengthMenu": "每页 _MENU_ 项",
"sZeroRecords": "没有匹配结果",
"sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
"sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页",
"sJump": "跳转"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
autoWidth: false, //禁用自动调整列宽
stripeClasses: ["odd", "even"],//为奇偶行加上样式，兼容不支持CSS伪类的场合
order: [], //取消默认排序查询,否则复选框一列会出现小箭头
processing: false, //隐藏加载提示,自行处理
serverSide: true, //启用服务器端分页
searching: false //禁用原生搜索
},
COLUMN: {
CHECKBOX: { //复选框单元格
className: "td-checkbox",
orderable: false,
width: "30px",
data: null,
render: function (data, type, row, meta) {
return '';
}
}
},
RENDER: { //常用render可以抽取出来，如日期时间、头像等
ELLIPSIS: function (data, type, row, meta) {
data = data||"";
return '' + data + '';
}
}
}
};后台代码：
@RequestMapping(value = "/getCarrierByPage")
@ResponseBody
public String getCarrierByPage() throws Exception{
//直接返回前台
String draw = request.getParameter("draw");
//数据起始位置
String startIndex = request.getParameter("startIndex");
//每页显示的条数
String pageSize = request.getParameter("pageSize");
//获取排序字段
String orderColumn = request.getParameter("orderColumn");
if(orderColumn == null){
orderColumn = "carrier_id";
}
//获取排序方式
String orderDir = request.getParameter("orderDir");
if(orderDir == null){
orderDir = "asc";
}
//查询条件
String carrierId = request.getParameter("id");
String carrierName = request.getParameter("name");
String carrierStatus = request.getParameter("status");
XcxCarrier x = new XcxCarrier();
if(null != carrierId && !"".equals(carrierId)){
x.setCarrierId(Long.parseLong(carrierId));
}
x.setCarrierName(carrierName);
if(null != carrierStatus && !"".equals(carrierStatus)){
x.setCarrierStatus(Integer.parseInt(carrierStatus));
}
PageHelper.offsetPage(getPageNo(Integer.parseInt(startIndex)), getPageSize(Integer.parseInt(pageSize)));
List result = this.xcxCarrierService.querySelectByCondition(orderColumn, orderDir, x);
PageInfo pageInfo = new PageInfo(result);
Map info = new HashMap();
System.out.println(JSONObject.fromObject(pageInfo));
info.put("pageData", pageInfo.getList());
info.put("total", pageInfo.getTotal());
info.put("draw", draw);
return JSONObject.fromObject(info)+"";
}
到此，一个简单的demo就完成了，如果有疑问，可以访问datatables的官网查看api文档。再次感谢DataTables中文网交流群 547691991中提供的demo。