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

时间:2021-08-03 14:45:39

       近期的项目中用到了一个功能非常强大的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);