DATATABLE分页
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%@includefile="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<linkrel="stylesheet"type="text/css"href="${ctxStatic}/DataTables-1.10.4/media/css/jquery.dataTables.css">
<linkrel="stylesheet"type="text/css"href="${ctxStatic}/DataTables-1.10.4/examples/resources/syntax/shCore.css">
<linkrel="stylesheet"type="text/css"href="${ctxStatic}/DataTables-1.10.4/examples/resources/demo.css">
<styletype="text/css"class="init">
</style>
<scripttype="text/javascript"language="javascript"src="${ctxStatic}/DataTables-1.10.4/media/js/jquery.js"></script>
<scripttype="text/javascript"language="javascript"src="${ctxStatic}/DataTables-1.10.4/media/js/jquery.dataTables.js"></script>
<scripttype="text/javascript"language="javascript"src="${ctxStatic}/DataTables-1.10.4/examples/resources/syntax/shCore.js"></script>
<scripttype="text/javascript"language="javascript"src="${ctxStatic}/DataTables-1.10.4/examples/resources/demo.js"></script>
<scripttype="text/javascript"language="javascript"class="init">
$(document).ready(function(){
$('#example').dataTable({
"processing":true,
"serverSide":true,
"pageLength":10,
//"lengthMenu":[[10,25,50,-1],[10,25,50,"All"]],
"deferRender":true,
"oLanguage":{
"sEmptyTable":"没有记录",
"sProcessing":"处理中，请稍候...",
"sLengthMenu":"每页显示_MENU_条记录",
"sZeroRecords":"没有记录",
"sInfo":"当前显示从_START_到_END_条记录,总记录数为_TOTAL_条",
"sInfoEmpty":"记录数为0",
"sInfoFiltered":"(从全部记录数_MAX_条中过滤)",
"sInfoPostFix":"",
"sLoadingRecords":"正在加载中,请稍候...",
"sSearch":"搜索",
"sUrl":"",
"oPaginate":{
"sFirst":"首页",
"sPrevious":"上一页",
"sNext":"下一页",
"sLast":"末页"
}
},
"ajax":"${ctx}/dataTables/datatables.do",
"columns":[
{'data':'firstName'},
{'data':'lastName'},
{'data':'position'},
{'data':'office','bSortable':false},
{'data':'startDate'},
{'data':'age'},
{'data':'salary'}
],
"columnDefs":[//自定义d第7列返回值
{
'targets':[7],
'data':'id',
'render':function(data,type,row,meta){
varresult="<ahref=\'javascript:update(\""+data+"\")\'title=\'修改\'>修改</a> ";
result+="<ahref=\'javascript:del(\""+data+"\")\'title=\'删除\'>删除</a> ";
result+="<ahref=\'javascript:show(\""+data+"\")\'title=\'查看\'>查看</a>";
returnresult;
}
}
]
});
});
functionupdate(id){
alert(id);
}
functiondel(id){
alert(id);
}
functionshow(id){
alert(id);
}
</script>
</head>
<body>
<divclass="container">
<tableid="example"class="display"cellspacing="0"width="100%">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Position</th>
<th>Office</th>
<th>Startdate</th>
<th>Age</th>
<th>Salary</th>
<th>Operation</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Position</th>
<th>Office</th>
<th>Startdate</th>
<th>Age</th>
<th>Salary</th>
<th>Operation</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
------------------------
privateDatatablesResponse(DataSet<T>dataSet,PageCriteriaspcs){
this.data=dataSet.getRows();
this.recordsTotal=dataSet.getTotalRecords();
this.recordsFiltered=dataSet.getTotalDisplayRecords();
this.draw=pcs.getDraw();
}
-----------------------------------------
publicclassPageCriteriasimplementsSerializable{
privatestaticfinallongserialVersionUID=1L;
/**
*请求次数
*/
privateIntegerdraw;
/**
*分页开始记录
*/
privateIntegerstart;
/**
*分页大小
*/
privateIntegerlength;
/**
*查询框输入的值
*/
privateStringsearchValue;
/**
*查询正则表达式
*/
privateStringsearchRegex;
/**
*排序规则ASCDESC
*/
privateStringorderValue;
/**
*排序字段值
*/
privateStringorderField;
/**
*排序字段列
*/
privateStringorderColumn;
publicIntegergetDraw(){
returndraw;
}
publicvoidsetDraw(Integerdraw){
this.draw=draw;
}
publicIntegergetStart(){
returnstart;
}
publicvoidsetStart(Integerstart){
this.start=start;
}
publicIntegergetLength(){
returnlength;
}
publicvoidsetLength(Integerlength){
this.length=length;
}
publicStringgetSearchValue(){
returnsearchValue;
}
publicvoidsetSearchValue(StringsearchValue){
this.searchValue=searchValue;
}
publicStringgetSearchRegex(){
returnsearchRegex;
}
publicvoidsetSearchRegex(StringsearchRegex){
this.searchRegex=searchRegex;
}
publicStringgetOrderValue(){
returnorderValue;
}
publicvoidsetOrderValue(StringorderValue){
this.orderValue=orderValue;
}
publicStringgetOrderField(){
returnorderField;
}
publicvoidsetOrderField(StringorderField){
this.orderField=orderField;
}
publicStringgetOrderColumn(){
returnorderColumn;
}
publicvoidsetOrderColumn(StringorderColumn){
this.orderColumn=orderColumn;
}
}
----------------------------------------------
@Override
publicDataSet<DatatablesBean>findDatatablesWithPageCriterias(PageCriteriaspcs){
List<DatatablesBean>rows=datatablesMapper.findPaginated(getParams(pcs));
longcount=datatablesMapper.findPaginatedCount(getParams(pcs));
DataSet<DatatablesBean>dataSet=newDataSet<DatatablesBean>(rows,count,count);
returndataSet;
}
privateMap<String,Object>getParams(PageCriteriaspcs){
Map<String,Object>params=newHashMap<String,Object>();
if(null!=pcs){
params.put("offset",pcs.getStart());
params.put("pagesize",pcs.getLength());
params.put("search",pcs.getSearchValue());//查询输入框的值
//Stringcolumn=pcs.getOrderColumn();
Stringorder=pcs.getOrderValue();
Stringfield=pcs.getOrderField();
if("0".equals(field)){
params.put("sortName","first_name"+order);//排序字段值
}elseif("1".equals(field)){
params.put("sortName","last_name"+order);
}elseif("2".equals(field)){
params.put("sortName","position"+order);
}elseif("3".equals(field)){
params.put("sortName","office"+order);
}elseif("4".equals(field)){
params.put("sortName","start_date"+order);
}elseif("5".equals(field)){
params.put("sortName","age"+order);
}elseif("6".equals(field)){
params.put("sortName","salary"+order);
}else{
params.put("sortName","id"+order);
}
}
returnparams;
}
---------------------------------------------
ctrol
@RequestMapping("/datatables.do")
@ResponseBody
publicDatatablesResponse<DatatablesBean>list(PageCriteriaspcs){
//LOG.info(JSON.toJSONString(pcs));
DataSet<DatatablesBean>dataSet=datatablesService.findDatatablesWithPageCriterias(pcs);
DatatablesResponse<DatatablesBean>resp=DatatablesResponse.build(dataSet,pcs);
LOG.info(JSON.toJSONString(resp));
returnresp;
}
----------------
@Override
publicDataSet<DatatablesBean>findDatatablesWithPageCriterias(PageCriteriaspcs){
List<DatatablesBean>rows=datatablesMapper.findPaginated(getParams(pcs));
longcount=datatablesMapper.findPaginatedCount(getParams(pcs));
DataSet<DatatablesBean>dataSet=newDataSet<DatatablesBean>(rows,count,count);
returndataSet;
}
-----------------------
privateDatatablesResponse(DataSet<T>dataSet,PageCriteriaspcs){
this.data=dataSet.getRows();
this.recordsTotal=dataSet.getTotalRecords();
this.recordsFiltered=dataSet.getTotalDisplayRecords();
this.draw=pcs.getDraw();
}
----------------------
publicfinalclassDataSet<T>{
privateList<T>rows;
privatefinalLongtotalDisplayRecords;
privatefinalLongtotalRecords;
publicDataSet(List<T>rows,LongtotalRecords,LongtotalDisplayRecords){
this.rows=rows;
this.totalRecords=totalRecords;
this.totalDisplayRecords=totalDisplayRecords;
}
--------------------
publicclassDatatablesBean{
privateIntegerid;
privateStringfirstName;
privateStringlastName;
privateStringposition;
privateStringemail;
privateStringoffice;
privateDatestartDate;
privateIntegerage;
privateIntegersalary;
privateStringextn;
----------------------
<!--分页查询列表-->
<selectid="findPaginated"parameterType="map"resultMap="BaseResultMap">
select
<includerefid="Base_Column_List"/>
fromdatatables_demot
where1=1
<iftest="search!=nullandsearch!=''">
ANDt.first_nameLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')or
t.last_nameLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')or
t.positionLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')or
t.emailLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')or
t.officeLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')or
t.ageLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')or
t.salaryLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')
</if>
<!--排序-->
<iftest="sortName!=nullandsortName!=''">
ORDERBY${sortName}
</if>
limit#{offset},#{pagesize}
</select>
<!--查询总记录数-->
<selectid="findPaginatedCount"parameterType="map"resultType="long">
selectcount(*)fromdatatables_demot
where1=1
<iftest="search!=nullandsearch!=''">
ANDt.first_nameLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')or
t.last_nameLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')or
t.positionLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')or
t.emailLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')or
t.officeLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')or
t.ageLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')or
t.salaryLIKECONCAT(CONCAT('%',#{search,jdbcType=VARCHAR}),'%')
</if>
</select>