DATATABLE分页

ywy0 2018-05-05

<%@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>&nbsp;&nbsp;";

result+="<ahref=\'javascript:del(\""+data+"\")\'title=\'删除\'>删除</a>&nbsp;&nbsp;";

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>

ywy0

ywy0

相关推荐

jquery datatable 的分页参数太坑爹了

jquery datatable 传递的分页参数是非json格式，然后我后台用的spring MVC后台接收的分页参数一般是一个分页对象。调了半天都不行，后来在以下网址找到解决方案。昨天在博客园的博问上帮一位园友解决了一个问题，我觉得有必要记录一下，万一有

83433860 / 0评论 2017-05-24

jquery datatable 的分页参数太坑爹了

jquery datatable 传递的分页参数是非json格式，然后我后台用的spring MVC后台接收的分页参数一般是一个分页对象。调了半天都不行，后来在以下网址找到解决方案。前言昨天在博客园的博问上帮一位园友解决了一个问题，我觉得有必要记录一下，万

郭贝贝编程 / 0评论 2017-05-24

Jquery Datatables 异步分页加载数据

Jquery Datatables 异步分页加载数据正在做的一个Web项目，其中用到了jQuerydatatables这个表格控件，说实话挺好用的，顺便自己记录一下

yongyonglsy / 0评论 2016-11-07

DataTables自定义分页条数实现

背景因项目需要，选择了DataTables这款表格插件做数据展示。在实际开发过程中，需要将所有的搜索条件放在页面顶部，所以我需要DataTables的搜索和分页条数单独提出来。解决办法办法其实很简单，只需要参考DataTables的官网文档就可找到。当时因

Chydar / 0评论 2019-06-26

jQuery datatables使用 ( 前台页面实现分页 简单案例一 未完待续...)

--引入样式文件和脚本文件-->. --嵌入JS代码设置分页操作-->. //其他具体操作属性...

EdwardSiCong / 0评论 2011-09-29

推荐一个jquery排序分页插件

致力于使用简单的页面客户端排序，分页jquery插件。推荐这个是因为自己用的时候相当容易。注明，两种写法只用一个就可以，都是表明对应的字段类型的。

87281248 / 0评论 2011-08-11

对比分析Django的Q查询及AngularJS的Datatables分页插件

from django.db.models import Q可以组合使用&,|操作符用于多个Q的对象,产生一个新的Q对象，Q对象也可以用~操作符放在前面表示否定，如下例所示：。q.add #把query添加到之前定义的最外层的Q对象中，查询条件是

Jerry / 0评论 2017-02-07

jQuery插件DataTables分页开发心得体会

开发环境：Python 3.6.0、Anaconda 4.3.1、Django、JetBrains PyCharm 2017.1.5. 按我项目的开发过程简单整理。在此之前有用到过DataTables，因此想着前端/客户端差异不大，服务端反正都是按规范格式

csdnliuy / 0评论 2017-08-22

jQuery DataTables插件自定义Ajax分页实例解析

由于后端在目前的情况下是更改不了，只能在前端实现。关于ajax详细介绍请看官方说明：中文 | 英文。ajax接收三种类型的参数：*string： 设置获取数据的url*object：和 jQuery.ajax 定义类似*function：自定义获取数据的功

流浪蓝 / 0评论 2016-05-21