datatables+java实现服务器端分页，排序，查询，列的显示影藏
2017-01-10 11:55
411 查看
最近看了下datatables，模仿写了一个小例子，和大家分享一下。效果图如下
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或者descparam.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>
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或者descparam.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")@ResponseBodypublic 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文档。再次感谢DataTables中文网交流群 547691991中提供的demo。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- datatables+java实现服务器端分页，排序，查询，列的显示影藏
- datatables+java实现服务器端分页，排序，查询，列的显示隐藏
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除、导出、突出显示等常见应用实现(cs)
- [ExtNet]Grid怎么实现服务器端分页、排序、查询？-MS SQL存储过程分页
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除、导出、突出显示等常见应用实现
- [ExtNet]Grid怎么实现服务器端分页、排序、查询？-MS SQL存储过程分页
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除、导出、突出显示等常见应用实现
- [ExtNet] GridPanel怎么实现服务器端分页、排序、查询?--Oracel存储过程分页
- java-用SSH框架实现将查询的信息分页显示
- JAVA_WEB项目之Lucene实现检索结果排序和关键字在索引库中多字段查询结果进行高亮显示
- Mongodb 3.2 Java 显示指定字段 条件查询 分页排序
- [ExtNet] GridPanel怎么实现服务器端分页、排序、查询?--Oracel存储过程分页
- Java实现简单分页查询显示
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- NClay.MVC实现数据查询,分页和排序
- GridView 实现自定义分页、排序、查询、添加、编辑、多选删除 之代码规范
- JSP+Javabean+JSTL实现了记录分页显示
- Silverlight学习笔记二：DataGrid 服务器端分页、排序的实现
- 利用MySQL的一个特性实现MySQL查询结果的分页显示
- Struts中实现查询结果分页显示