带有查询和排序功能的jquery分页插件——DataTables

近期的项目中用到了一个功能非常强大的jquery分页插件— —DataTables，只需要向Action传递4个参数，调用相应的查询方法，就可以做出带有查询和排序功能的分页来，下面来介绍一下主要的代码。

一、页面部分

（1）、引用的js：
jquery.datatables.min.js

（2）、javascript代码

$('#tab1').dataTable({
"bJQueryUI": true,//可以添加 jqury的ui theme 需要添加css
"iDisplayStart":0,
"iDisplayLength":30,//显示行数
"bProcessing": true,//载入时，显示进度表示
"bAutoWidth": true, //自适应宽度
//"sScrollX": "100%", //表格的宽度
//"sScrollXInner": "110%", //表格的内容宽度
//"bScrollCollapse": true, //当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)
//"aaSorting": [[1, "asc"]], //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
"bServerSide": true, //是否启动服务器端数据导入，即要和sAjaxSource结合使用
"sPaginationType": "full_numbers",//分页，一共两种样式，full_numbers和two_button(默认)
"aLengthMenu": [[10, 25, 50, -1, 0], ["每页10条", "每页25条", "每页50条", "显示所有数据", "不显示数据"]],//设置每页显示记录的下拉菜单
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到任何相关数据",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。",
"sInfoEmpty": "找不到相关数据",
"sInfoFiltered": "（数据表中共为 _MAX_ 条记录）",
"sProcessing": "正在加载中...",
"sSearch": "搜索",
"sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
"oPaginate": {
"sFirst": "第一页",
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
"sLast": " 最后一页 "
}
}, //多语言配置
//"bStateSave": true, //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
//"bRegex":true,
"bSort":false,//是否支持排序功能
"sAjaxSource": "${pageContext.request.contextPath }/…/…!….do?timestamp="+new Date().getTime(),
"sServerMethod":"post",
//"aoColumns": [
//null,
//null,
//{
//"bVisible": true, //不可见
//"bSearchable": false, //参与搜索
//},
//null,
//null
//], //列设置，表有几列，数组就有几项
"bFilter":true,//是否出现过滤框，搜索栏
"bSort":true,	//是否启用排序功能
//"bInfo":true,//显示表格信息
"bPaginate" : true,//是否支持分页
"bLengthChange" : false,//左上角显示记录数
"aoColumnDefs" : [{
"sClass":"center",
"aTargets":['_all']
},{
"bSearchable" : false,
"aTargets" : [0,2,3,4,5,6,7,8]//['_all']
},{
"bSortable" : false, //指定不支持排序的列
"aTargets" : ['_all']//['_all']
},{
"sWidth" : "13%", 	//指定列宽
"aTargets" : [1,3,5]//['_all']
}],
"aoColumns" : [ {
"mData" : "id",
"mRender" : function(mData,type,full) {
return mData;
}
},
{
"mData" : "name"
},
{
"mData" : "status" ,
"mRender" : function(mData) {
if (mData == 0) {
return '备案中';
} else if (mData == 1) {
return '审批通过';
}
}
}
.
.
.,
{
"mData" : null,
//"sDefaultContent":"编辑"
"mRender" : function(mData,type,full) {
var html = [];
html.push('<button onclick="'+'toUpdateInfo('+full.id+')" class="btn btn-primary btn-mini">编辑</button> ');
html.push('<button onclick="'+'toShowSubInfo('+full.id+')" class="btn  btn-success btn-mini">子级</button> ');
if(full.status == 0){
//html.push('<button onclick="'+'auditDomain('+full.id+',1)" class="btn btn-primary btn-mini">通过</button>');
// html.push('<button onclick="'+'auditDomain('+full.id+',-1)" class="btn btn-success btn-mini">不通过</button>');
html.push('<button onclick="'+'toAuditInfo('+full.id+')" class="btn btn-info btn-mini">审批</button>');
}

//   html.push('<button onclick="'+'deleteDomainInfo('+full.id+')" class="btn btn-success btn-mini">删除</button>');
return html.join('');
}
}

]
//"sDom": '<""l>rt<"F"ifp>'
//"sDom": '<"H"lfr>t<"F"ip>'

//l- 每页显示数量
//f - 过滤输入
//t - 表单Table
//i - 信息
//p - 翻页
//r - pRocessing
//< and > - div elements
//<"class" and > - div with a class
//Examples: <"wrapper"flipt>, <lf<t>ip>

});

（3）html代码：（指定的css类table 和table-bordered是在bootstrap.min.css中定义的）

<table css="table table-bordered data-table ” id=’tab1’>
<thead>
<tr>
<th>序号</th>
……
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

注：table中的表头应该与js中dataTables部分的aoColumns属性列出参数的对应

二、java后台代码

（1）、写一个用来调用查询方法的action类，需要从页面传的参数

private int sEcho;	服务器传送次数(页面传过来的参数，原样返回)
private String sSearch;		查询条件
private int iDisplayStart;			开始位置
private int iDisplayLength;		每页记录数

（2）、PageUtil类 ，用来存储分页查询时的需要的参数

PageUtil类中的属性：
private int sEcho;//服务器传送次数
private String where; //where 条件内容
private String sort; //排序内容
private int iDisplayStart;//从第几条数据开始，用于分页
private int iDisplayLength;//每页显示记录数，用于分页

（3）、用于存储查询结果的类PageResult类：

PageResult类中的各个属性：

private int sEcho;	服务器传送次数
private long iTotalRecords;	过滤前总记录数
private long  iTotalDisplayRecords;			过滤后总记录数
private List aaData			返回数据

（4）、查询时的主要代码(hql语句需要根据PageUtil类来写)

Query query = createQuery(hql, values);
List list = query.setFirstResult(pageUtil.getIDisplayStart()).setMaxResults(pageUtil.getIDisplayLength()).list();
PageResult page = new PageResult(pageUtil.getSEcho(),totalCount, filterCount, list);