DATATABLE分页

最新推荐文章于 2024-06-06 09:35:41 发布

z346769332

最新推荐文章于 2024-06-06 09:35:41 发布

阅读量195

点赞数

文章标签： javascript java json ViewUI

本文链接：https://blog.csdn.net/z346769332/article/details/84920102

版权

[size=large][b]<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="${ctxStatic}/DataTables-1.10.4/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="${ctxStatic}/DataTables-1.10.4/examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="${ctxStatic}/DataTables-1.10.4/examples/resources/demo.css">

<style type="text/css" class="init">

</style>

<script type="text/javascript" language="javascript" src="${ctxStatic}/DataTables-1.10.4/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="${ctxStatic}/DataTables-1.10.4/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="${ctxStatic}/DataTables-1.10.4/examples/resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="${ctxStatic}/DataTables-1.10.4/examples/resources/demo.js"></script>

<script type="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) {
var result="<a href=\'javascript:update(\""+data+"\")\' title=\'修改\'>修改</a> ";
result+="<a href=\'javascript:del(\""+data+"\")\' title=\'删除\'>删除</a> ";
result+="<a href=\'javascript:show(\""+data+"\")\' title=\'查看\'>查看</a>";
return result;
}
}
]
} );
} );

function update(id) {
alert(id);
}

function del(id) {
alert(id);
}

function show(id) {
alert(id);
}

</script>
</head>
<body>
<div class="container">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Age</th>
<th>Salary</th>
<th>Operation</th>
</tr>
</thead>

<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Age</th>
<th>Salary</th>
<th>Operation</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
------------------------
private DatatablesResponse(DataSet<T> dataSet, PageCriterias pcs) {
this.data = dataSet.getRows();
this.recordsTotal = dataSet.getTotalRecords();
this.recordsFiltered = dataSet.getTotalDisplayRecords();
this.draw = pcs.getDraw();
}
-----------------------------------------
public class PageCriterias implements Serializable {
private static final long serialVersionUID = 1L;
/**
* 请求次数
*/
private Integer draw;
/**
* 分页开始记录
*/
private Integer start;
/**
* 分页大小
*/
private Integer length;
/**
* 查询框输入的值
*/
private String searchValue;
/**
* 查询正则表达式
*/
private String searchRegex;
/**
* 排序规则ASC DESC
*/
private String orderValue;
/**
* 排序字段值
*/
private String orderField;
/**
* 排序字段列
*/
private String orderColumn;

public Integer getDraw() {
return draw;
}
public void setDraw(Integer draw) {
this.draw = draw;
}
public Integer getStart() {
return start;
}
public void setStart(Integer start) {
this.start = start;
}
public Integer getLength() {
return length;
}
public void setLength(Integer length) {
this.length = length;
}
public String getSearchValue() {
return searchValue;
}
public void setSearchValue(String searchValue) {
this.searchValue = searchValue;
}
public String getSearchRegex() {
return searchRegex;
}
public void setSearchRegex(String searchRegex) {
this.searchRegex = searchRegex;
}
public String getOrderValue() {
return orderValue;
}
public void setOrderValue(String orderValue) {
this.orderValue = orderValue;
}
public String getOrderField() {
return orderField;
}
public void setOrderField(String orderField) {
this.orderField = orderField;
}
public String getOrderColumn() {
return orderColumn;
}
public void setOrderColumn(String orderColumn) {
this.orderColumn = orderColumn;
}
}
----------------------------------------------
@Override
public DataSet<DatatablesBean> findDatatablesWithPageCriterias(PageCriterias pcs) {
List<DatatablesBean> rows = datatablesMapper.findPaginated(getParams(pcs));
long count = datatablesMapper.findPaginatedCount(getParams(pcs));
DataSet<DatatablesBean> dataSet = new DataSet<DatatablesBean>(rows, count, count);
return dataSet;
}
private Map<String,Object> getParams(PageCriterias pcs){
Map<String, Object> params = new HashMap<String, Object>();
if(null != pcs) {
params.put("offset", pcs.getStart());
params.put("pagesize", pcs.getLength());
params.put("search", pcs.getSearchValue()); //查询输入框的值

//String column = pcs.getOrderColumn();
String order = pcs.getOrderValue();
String field = pcs.getOrderField();
if("0".equals(field)) {
params.put("sortName", " first_name "+order); //排序字段值
}else if("1".equals(field)) {
params.put("sortName", " last_name "+order);
}else if("2".equals(field)) {
params.put("sortName", " position "+order);
}else if("3".equals(field)) {
params.put("sortName", " office "+order);
}else if("4".equals(field)) {
params.put("sortName", " start_date "+order);
}else if("5".equals(field)) {
params.put("sortName", " age "+order);
}else if("6".equals(field)) {
params.put("sortName", " salary "+order);
}else {
params.put("sortName", " id "+order);
}
}
return params;
}
---------------------------------------------
ctrol
@RequestMapping("/datatables.do")
@ResponseBody
public DatatablesResponse<DatatablesBean> list(PageCriterias pcs) {
//LOG.info(JSON.toJSONString(pcs));
DataSet<DatatablesBean> dataSet = datatablesService.findDatatablesWithPageCriterias(pcs);
DatatablesResponse<DatatablesBean> resp = DatatablesResponse.build(dataSet, pcs);
LOG.info(JSON.toJSONString(resp));
return resp;
}
----------------
@Override
public DataSet<DatatablesBean> findDatatablesWithPageCriterias(PageCriterias pcs) {
List<DatatablesBean> rows = datatablesMapper.findPaginated(getParams(pcs));
long count = datatablesMapper.findPaginatedCount(getParams(pcs));
DataSet<DatatablesBean> dataSet = new DataSet<DatatablesBean>(rows, count, count);
return dataSet;
}
-----------------------
private DatatablesResponse(DataSet<T> dataSet, PageCriterias pcs) {
this.data = dataSet.getRows();
this.recordsTotal = dataSet.getTotalRecords();
this.recordsFiltered = dataSet.getTotalDisplayRecords();
this.draw = pcs.getDraw();
}
----------------------
public final class DataSet<T> {
private List<T> rows;
private final Long totalDisplayRecords;
private final Long totalRecords;

public DataSet(List<T> rows, Long totalRecords, Long totalDisplayRecords) {
this.rows = rows;
this.totalRecords = totalRecords;
this.totalDisplayRecords = totalDisplayRecords;
}

--------------------
public class DatatablesBean {
private Integer id;

private String firstName;

private String lastName;

private String position;

private String email;

private String office;

private Date startDate;

private Integer age;

private Integer salary;

private String extn;

----------------------

<select id="findPaginated" parameterType="map" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from datatables_demo t
where 1 = 1
<if test="search != null and search != ''">
AND t.first_name LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.last_name LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.position LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.email LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.office LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.age LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.salary LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%')
</if>

<if test="sortName != null and sortName != ''">
ORDER BY ${sortName}
</if>
limit #{offset},#{pagesize}
</select>


<select id="findPaginatedCount" parameterType="map" resultType="long">
select count(*) from datatables_demo t
where 1=1
<if test="search != null and search != ''">
AND t.first_name LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.last_name LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.position LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.email LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.office LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.age LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%') or
t.salary LIKE CONCAT(CONCAT('%', #{search,jdbcType=VARCHAR}),'%')
</if>
</select> [/b][/size]

z346769332

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DATATABLE分页

[size=large][b]Insert title here $(document).ready(function() { $('#example').dataTable( { "processing": true, "serverSide": t...
复制链接

扫一扫