遇到的问题:
之前做的分页用的是themleaf分页,在每一个分页处我都写了href提交查询,每点击下一页的时候都会提交url查询,查询的数据只是那一页要显示的数据,提交的url中拼接的值是通过themleaf来取值的,遇到中文查询的时候会编码错误。
解决:
由于themleaf没办法编码,要通过js编码,所以要去掉href,而是js查询,可是尝试了很多次js中取值,不好取,因为这些值都是用themleaf来取,在js中用themleaf取值也可行,但是我尝试后发现不成功。于是打算用纯js分页。就是在点击查询按钮的时候,查到所有的数据,js选择显示部分,其他部分可以不显示。这样就不用每次点击下一页都要查询数据,就避免了中文url的问题,还省去了编码。
需要到的其他代码在上一篇链接: themleaf+html+springboot实现分页.
参考了代码 链接: link.
链接: link.
点击查询按钮查询那部分的地方不用改,该查到的数据一次性查到。
不管是查询全部还是关键字查询到,把查询到的所有数据分页显示。点击页数的时候不到后台重新查询数据。
之前那种前端拿到的数据只是那一页显示的数据,而不是全部。当点击下一页,如果是关键字查询会把关键字再带到后台进行查询,如果不是关键字查询一样会再查询。
js代码
/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始,因而存在加减某个常数,以确定真正的记录数
* 纯js分页实质是数据行全部加载,通过是否显示属性完成分页功能
**/
function goPage(pno){
var itable = document.getElementById("idData");
var num = itable.rows.length;//表格所有行数(所有记录数)
console.log(num);
var totalPage = 0;//总页数
var pageSize = 10;//每页显示行数
//总共分几页
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//当前页数
var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
var endRow = currentPage * pageSize;//结束显示的行 40
endRow = (endRow > num)? num : endRow; //40
console.log(endRow);
//遍历显示数据实现分页
for(var i=1;i<(num+1);i++){
var irow = itable.rows[i-1];
if(i>=startRow && i<=endRow){
irow.style.display = "table-row";
}else{
irow.style.display = "none";
}
}
var pageEnd = document.getElementById("pageEnd");
var tempStr = '<lable style="width:100%;height:20px;padding-left:7px;font-size:12pt;font-family:Microsoft YaHei; background-repeat:repeat-x; display:block; margin-top: 5px;">共'+totalPage+'页,当前第'+currentPage+'页</lable>';
var tempStr1 = "";
if(currentPage>1){
tempStr1 += "<li class='page-item'><a class='page-link' onClick=\"goPage("+(1)+")\">首页</a></li>";
tempStr1 += "<li class='page-item'><a class='page-link' onClick=\"goPage("+(currentPage-1)+")\">上一页</a></li>"
}else{
tempStr1 += "<ul class='pagination'><li class='page-item'><a class='page-link'>首页</a></li>";
tempStr1 += "<li class='page-item'><a class='page-link'>上一页</a></li>";
}
if(currentPage==1){
tempStr1 += "<li class='page-item active' ><a class='page-link' οnclick=\"goPage("+currentPage+")\">"+ currentPage +"</a></li>";
for(var pageIndex= currentPage+1;pageIndex<currentPage+5;pageIndex++){
tempStr1 += "<li class='page-item'><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
}
else if(currentPage==2){
for(var pageIndex= currentPage-1;pageIndex<currentPage;pageIndex++){
tempStr1 += "<li class='page-item'><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
tempStr1 += "<li class='page-item active'><a class='page-link' οnclick=\"goPage("+currentPage+")\">"+ currentPage +"</a></li>";
for(var pageIndex= currentPage+1;pageIndex<currentPage+4;pageIndex++){
tempStr1 += "<li class='page-item'><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
}
else if(currentPage>2 && currentPage<totalPage-1){
for(var pageIndex= currentPage-2;pageIndex<currentPage;pageIndex++){
tempStr1 += "<li class='page-item' ><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
tempStr1 += "<li class='page-item active'><a class='page-link' οnclick=\"goPage("+currentPage+")\">"+ currentPage +"</a></li>";
for(var pageIndex= currentPage+1;pageIndex<currentPage+3;pageIndex++){
tempStr1 += "<li class='page-item' ><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
}
else if(currentPage==totalPage-1){
for(var pageIndex= currentPage-3;pageIndex<currentPage;pageIndex++){
tempStr1 += "<li class='page-item' ><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
tempStr1 += "<li class='page-item active'><a class='page-link' οnclick=\"goPage("+currentPage+")\">"+ currentPage +"</a></li>";
tempStr1 += "<li class='page-item' ><a class='page-link' οnclick=\"goPage("+totalPage+")\">"+ totalPage +"</a></li>";
}
else if(currentPage==totalPage){
for(var pageIndex= currentPage-4;pageIndex<currentPage;pageIndex++){
tempStr1 += "<li class='page-item' ><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
tempStr1 += "<li class='page-item active' ><a class='page-link' οnclick=\"goPage("+totalPage+")\">"+ totalPage +"</a></li>";
}
if(currentPage<totalPage){
tempStr1 += "<li class='page-item'><a class='page-link' onClick=\"goPage("+(currentPage+1)+")\">下一页</a></li>";
tempStr1 += "<li class='page-item'><a class='page-link' onClick=\"goPage("+(totalPage)+")\">尾页</a></li></ul>";
}else{
tempStr1 += "<li class='page-item'><a class='page-link'>下一页</a></li>";
tempStr1 += "<li class='page-item'><a class='page-link'>尾页</a></li>";
}
// document.getElementById("barcon").innerHTML = tempStr;
document.getElementById("a1").innerHTML = tempStr;
document.getElementById("a2").innerHTML = tempStr1;
}
页面代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="all,follow">
<link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/orionicons.css}">
<link rel="stylesheet" th:href="@{/css/style.default.css}" id="theme-stylesheet">
<link rel="stylesheet" th:href="@{/css/all.css}">
<script th:src="@{/js/search2.js}"></script>
</head>
<body onLoad="goPage(1);">
<!-- navbar-->
<div th:replace="base/left::topbar"></div>
<div class="d-flex align-items-stretch">
<div th:replace="base/left::sidebar"></div>
<div class="page-holder w-100 d-flex flex-wrap">
<div class="container-fluid px-xl-5">
<section class="py-5">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="form-group">
<form class="form-inline" th:action="@{/UserExcelDownloads}" method="get">
<button type="submit" class="btn btn-success">导出数据</button>
</form>
</div>
<div class="form-group">
<form class="form-inline" th:action="@{/selectTemperatureRecord}" method="get">
<input type="date" name="datekey" id="show_date" class="date" required th:value="${datekey!=null}?${datekey}" />
<button type="submit" class="btn btn-success" id="timebutton">按时间查询</button>
</form>
</div>
<div class="form-group">
<form class="form-inline" th:action="@{/selectTemperatureRecord}" method="get">
<input name="keyname" required th:value="${keyname}" class="form-control" type="text" placeholder="按姓名/任务点查询...">
<button type="submit" class="btn btn-success">查询</button>
</form>
</div>
<div class="form-group">
<form class="form-inline" th:action="@{/selectTemperatureRecord}" method="get">
<input name="operationkey" required th:value="${operationkey!=null}?${operationkey}" class="form-control" type="text" placeholder="按运营场所查询...">
<button type="submit" class="btn btn-success">查询</button>
</form>
</div>
<div class="form-group">
<form class="form-inline" th:action="@{/selectTemperatureRecord}" method="get">
<input name="tempkey" required th:value="${tempkey!=null}?${tempkey}" class="form-control" type="text" placeholder="按温度查询...">
<button type="submit" class="btn btn-success">查询</button>
</form>
</div>
<div class="form-group">
<form class="form-inline" th:action="@{/selectTemperatureRecord}" method="get">
<select name="keyisnormal" class="form-control">
<option th:value="全部" >按体温状态查询</option>
<option th:value="正常" >正常</option>
<option th:value="异常" >异常</option>
<option th:value="无效" >无效</option>
</select>
<button type="submit" class="btn btn-success">查询</button>
</form>
</div>
<div class="form-group">
<form class="form-inline" th:action="@{/selectTemperatureRecord}" method="get">
<input name="floorkey" required th:value="${floorkey!=null}?${floorkey}" class="form-control" type="text" placeholder="按楼层查询...">
<button type="submit" class="btn btn-success">查询</button>
</form>
</div>
</div>
<table class="table" >
<br>
<thead>
<tr>
<th style="width: 80px;">##</th>
<th style="width: 130px;">##</th>
<th style="width: 80px;">##</th>
<th style="width: 80px;">##</th>
<th style="width: 80px;">##</th>
<th style="width: 80px;">##</th>
<th style="width: 150px;">##</th>
<th style="width: 150px;">##</th>
<th style="width: 80px;">##</th>
<th style="width: 80px;">##</th>
<th style="width: 150px;">##</th>
</tr>
</thead>
<!-- </table> -->
<!-- <table class="table" id="idData"> -->
<tbody id="idData">
<tr th:each="article:${temperatureRecordLists}">
<td th:text="${pageNum}==1?${articleStat.index}+1:10*(${pageNum}-1)+${articleStat.index}+1" style="width: 80px"></td>
<td style="width: 135px;height: 130px">
<div class="fileupload-new thumbnail" style="width: 100px;height: 130px">
<img th:src="@{${article.photoUrl}}" alt="" style="width: 100px;height: 130px" />
</div>
</td>
<td th:text="${article.name}" style="width: 80px"></td>
<td th:text="${article.sex}" style="width: 80px"></td>
<td th:text="${article.temperature}" style="width: 80px"></td>
<td th:text="${article.isNormal}" style="width: 80px"></td>
<td th:text="${#dates.format(article.createTime,'yyyy-MM-dd HH:mm:ss')}" style="width: 150px"></td>
<td th:text="${article.operation}" style="width: 150px"></td>
<td th:text="${article.pointName}" style="width: 80px"></td>
<td th:text="${article.floor}" style="width: 80px"></td>
<td th:text="${article.xPoint}+' , '+${article.yPoint}+' , '+${article.zPoint}" style="width: 150px"></td>
</tr>
</tbody>
</table>
</div>
</div>
<section class="py-5">
<div class="row" id="barcon" name="barcon">
<div class="col-4"></div>
<div class="form-control-label" id="a1"></div>
<ul class="pagination" id="a2">
</ul>
</div>
</section>
</div>
</div>
</section>
</div>
<nav aria-label="Page navigation example">
</nav>
<div th:replace="base/left::end"></div>
</div>
</div>
<!-- JavaScript files -->
<script th:src="@{/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
</body>
</html>
页面加上<body onLoad="goPage(1);">
要显示的分页情况,自己可以在js做相应的修改。因为代码是之前的代码,修改的时候有些地方没修改掉,可能不需要到,可自行删除