datatables+java实现服务器端分页，排序，查询，列的显示影藏

发布：2018-01-25 09:49浏览：次来源：网络作者：tianshu

最近看了下datatables，模仿写了一个小例子，和大家分享一下。效果图如下
datatables+java实现服务器端分页，排序，查询，列的显示影藏(图1)

jsp代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>快递公司列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
var rootPath = '${pageContext.request.contextPath}';
</script>
</head>
<body>
<form>
<span>编号:</span> <input type="text" placeholder="编号" id="id-search">
<span>名称:</span> <input type="text" placeholder="名称" id="name-search">
<span>状态:</span> <select id="status-search">
<option value="">全部</option>
<option value="1">可以查发</option>
<option value="2">可以链接</option>
<option value="3">仅供查询</option>
<option value="4">不可用</option>
</select>
<button type="button" id="btn_search">查询</button>
<a href="#" data-column="0">影藏编号</a>
<a href="#" data-column="1">影藏名称</a>
<a href="#" data-column="2">影藏状态</a>
<a href="#" data-column="3">影藏电话</a>
<a href="#" data-column="4">影藏网址</a>
<a href="#" data-column="5">影藏操作</a>
</form>
<table id="table" class="display">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>状态</th>
<th>电话</th>
<th>网址</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript" src="js/constant.js"></script>
<script type="text/javascript">
$(function(){
var $table = $("#table");
var _table = $table.dataTable($.extend(true,{},CONSTANT.DATA_TABLES.DEFAULT_OPTION, {
ajax : function(data, callback, settings) {
//封装请求参数
var param = userManage.getQueryCondition(data);
$.ajax({
type: "GET",
url: rootPath+"/carrier/getCarrierByPage.action",
cache : false, //禁用缓存
data: param, //传入已封装的参数
dataType: "json",
success: function(result) {
//异常判断与处理
if (result.errorCode) {
alert("查询失败");
return;
}
//封装返回数据
var returnData = {};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.total;//总记录数
returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = result.pageData;
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
callback(returnData);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
},
//绑定数据
columns: [
{
data: "carrierId",//字段名
},
{
data: "carrierName",//字段名
},
{
data : "carrierStatus",//字段名
render : function(data,type, row, meta) {
return (data == 1? "可以查发":data == 2?"可以链接":data == 3?"仅供查询":"不可用");
}
},
{
data : "carrierPhone",//字段名
},
{
data : "carrierLink",//字段名
orderable : false,//禁用排序
render : CONSTANT.DATA_TABLES.RENDER.ELLIPSIS//alt效果
},
{
data: null,//字段名
defaultContent:"",//无默认值
orderable : false//禁用排序
}
],
"createdRow": function ( row, data, index ) {
//不使用render，改用jquery文档操作呈现单元格
var $btnEdit = $('<button type="button" class="btn-edit">修改</button>');
var $btnDel = $('<button type="button" class="btn-del">删除</button>');
$('td', row).eq(5).append($btnEdit).append($btnDel);
},
"drawCallback": function( settings ) {
//渲染完毕后的回调
//默认选中第一行
//$("tbody tr",$table).eq(0).click();
}
})).api();//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
//查询
$("#btn_search").click(function(){
_table.draw();
});
//行点击事件
$("tbody",$table).on("click","tr",function(event) {
$(this).addClass("active").siblings().removeClass("active");
//获取该行对应的数据
var item = _table.row($(this).closest('tr')).data();
userManage.showItemDetail(item);
});
//按钮点击事件
$table.on("click",".btn-edit",function() {
//点击编辑按钮
var item = _table.row($(this).closest('tr')).data();
userManage.editItemInit(item);
}).on("click",".btn-del",function() {
//点击删除按钮
var item = _table.row($(this).closest('tr')).data();
userManage.deleteItem(item);
});
//影藏列
$('a').on( 'click', function (e) {
var cut = $(this).text()
if(cut.indexOf("显示")>-1){
$(this).text("影藏"+cut.split("示")[1])
}else{
$(this).text("显示"+cut.split("藏")[1])
}
e.preventDefault();
var column = _table.column( $(this).attr('data-column') );
column.visible( ! column.visible() );
} );
});
var userManage = {
getQueryCondition : function(data) {
var param = {};
//组装排序参数
if (data.order&&data.order.length&&data.order[0]) {
switch (data.order[0].column) {
case 0:
param.orderColumn = "carrier_id";//数据库列名称
break;
case 1:
param.orderColumn = "carrier_name";//数据库列名称
break;
case 2:
param.orderColumn = "carrier_status";//数据库列名称
break;
case 3:
param.orderColumn = "carrier_phone";//数据库列名称
break;
default:
param.orderColumn = "carrier_id";//数据库列名称
break;
}
//排序方式asc或者desc
param.orderDir = data.order[0].dir;
}
param.id = $("#id-search").val();//查询条件
param.name = $("#name-search").val();//查询条件
param.status = $("#status-search").val();//查询条件
//组装分页参数
param.startIndex = data.start;
param.pageSize = data.length;
param.draw = data.draw;
return param;
},
editItemInit : function(item) {
//编辑方法
alert("编辑"+item.carrierId+" "+item.carrierName);
},
deleteItem : function(item) {
//删除
alert("删除"+item.carrierId+" "+item.carrierName);
},
showItemDetail: function(item){
//点击行
alert("点击"+item.carrierId+" "+item.carrierName);
}
};
</script>
</body>
</html>

其余js和css都是datatables官方提供de
constant.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 '<input type="checkbox" class="iCheck">';
}
}
},
RENDER: { //常用render可以抽取出来，如日期时间、头像等
ELLIPSIS: function (data, type, row, meta) {
data = data||"";
return '<span title="' + data + '">' + data + '</span>';
}
}
}
};

后台代码：

@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<XcxCarrier> result = this.xcxCarrierService.querySelectByCondition(orderColumn, orderDir, x);
PageInfo<XcxCarrier> pageInfo = new PageInfo<XcxCarrier>(result);
Map<Object, Object> info = new HashMap<Object, Object>();
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文档。

上一篇：【填坑指南】小程序 view使用bindtap传值问题

下一篇：小程序用modal实现遮罩层

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

微信小程序开发工具常用快捷键2018-06-09
微信小程序架构分析《一》调试技巧，模块构成，理念分析2018-02-07
微信小程序架构分析《二》：view 模块和 service 模块的构成2018-02-07
微信小程序架构分析《三》：实现过程以及实时更新2018-02-07
梁兴臣:微信小程序开发三宗罪和解决方案2018-02-07
微信小程序使用Promise实践2018-02-07
微信小程序开发系列分析《一》视图层2018-02-07
微信小程序开发系列分析《二》数据层2018-02-07
微信小程序官方文档个人分析心得2018-02-07
微信小程序的原型设计尝鲜2018-02-07