Java实现分页效果
步骤
1.用户发出请求，传递条件
2.SpringMVC获取条件，数据库查询，传回结果
3.ajax得到数据进行处理，最终呈现
HTML设计
<div class="tab-pane active in " id="add-get-bill">
<div>
<table class="table table-condensed table-hover table-striped" id="viewPageTable" style="width: 100%;table-layout:fixed;word-wrap:break-word;font-size: 15px;">
<tr>
<th hidden="hidden">idth>
<th width="200px">时间th>
<th width="200px">操作IPth>
<th width="200px">操作人th>
<th>操作内容th>
tr>
<tbody id="viewPageBody">tbody>
table>
div>
<div class="page_nav">
<span>总共<span id="pageTotalSizeLabel">span> 页span>
<button class="pageButton" value="firstPage">首页button>
<button class="pageButton" value="pageUp">上一页button>
<button class="pageButton" id="labOne">button>
<button class="pageButton" id="labTwo">button>
<button class="pageButton" id="labThree">button>
<button class="pageButton" id="labFour">button>
<button class="pageButton" id="labFive">button>
<button class="pageButton" value="pageDown">下一页button>
<button class="pageButton" value="lastPage">尾页button>
div>
div>java后台获取数据，进行分页处理
/**
* 查询当月记录
* */
@ResponseBody
@RequestMapping(value = "/findLogPageMonth/{logMonth}/{pageNumber}",method = RequestMethod.GET,produces = "text/html;charset=UTF-8")
public String findLogPageMonth(@PathVariable("logMonth")String logMonth,@PathVariable("pageNumber")int pageNumber,Mapmap){
try{
int pageTotalNumber=0; //数据记录总条数
int pageSize=0; //总页数
int k = 0; //循环判断条件
List entityLogList=null;
List entityLogListTwo=new ArrayList<>();
entityLogList=userService.findLogMonth(logMonth); //查询取出该条件下数据库所有记录
//得到总记录数
pageTotalNumber=entityLogList.size();
//得到总页数，每一页10条记录
if(pageTotalNumber%10==0){
pageSize=pageTotalNumber/10;
}else{
//有余数，那么总页数要+1
pageSize=pageTotalNumber/10+1;
}
//对页面传回的页数进行判断
if(pageNumber<=pageSize) {
/**
* 根据访问的页数，取得相应数据
* i:表示从哪里开始取数据
* pageNumber*10：表示现在第几条记录
* */
for (int i = pageNumber * 10 - 10; i < pageTotalNumber; i++, k++) {
if (k < 10) {
//把数据从原来List集合中，转移到新的List集合
entityLogListTwo.add(entityLogList.get(i));
}
}
//把信息放在map中，传回用户界面
map.put("pageSize",pageSize);
map.put("dataList", entityLogListTwo);
map.put("RESULT_STATUS", "SUCCESS");
}else {
//超出总页数，传回错误信息
map.put("RESULT_STATUS","MORE_THAN_PAGENUMBER");
}
}catch (Exception e){
e.printStackTrace();
map.put("RESULT_STATUS","EXCEPTION");
}
return JSON.toJSONString(map);
}
JQuery获取数据
var pageTotalSize;
//操作日志--制表
function findPageMakeTable(pageNumber) {
//先清空原来table内容
$("#viewPageTable tr:not(:first)").html("");
//得到table主体
var tbody=window.document.getElementById("viewPageBody");
if(pageNumber==1){
//分页导航栏--内容填写
$("#labOne").val(1).html(1);
$("#labTwo").val(2).html(2);
$("#labThree").val(3).html(3);
$("#labFour").val(4).html(4);
$("#labFive").val(5).html(5);
}
//请求获取数据
$.ajax({
url: 'findLogPageMonth/'+'2017-08/'+pageNumber,
type: 'GET',
contentType: "application/json;charset-utf-8",
dataType: 'text',
data: {},
success:function(data){
//转化数据格式
var datalist =JSON.parse(data);
//得到数据结果，进行一个判断
var RESULT_STATUS=datalist.RESULT_STATUS;
if(pageNumber==pageTotalSize){
$("#labOne").val(parseInt(pageTotalSize)-4).html(parseInt(pageTotalSize)-4);
$("#labTwo").val(parseInt(pageTotalSize)-3).html(parseInt(pageTotalSize)-3);
$("#labThree").val(parseInt(pageTotalSize)-2).html(parseInt(pageTotalSize)-2);
$("#labFour").val(parseInt(pageTotalSize)-1).html(parseInt(pageTotalSize)-1);
$("#labFive").val(parseInt(pageTotalSize)).html(parseInt(pageTotalSize));
}
if(RESULT_STATUS=="SUCCESS") {
//取数数据记录
var emps = datalist.dataList;
//得到数据记录总数，保存在全局变量中
pageTotalSize=datalist.pageSize;
$("#pageTotalSizeLabel").html(pageTotalSize);
var str = "";
for (var i = 0; i < emps.length; i++) {
str += "" +
"" + i + " " +
"" + emps[i].logTime + " " +
"" + emps[i].logIp + " " +
"" + emps[i].logName + " " +
"" + emps[i].logDesc + " " +
" ";
}
//表格内容填写
tbody.innerHTML = str;
}else if(RESULT_STATUS=="EXCEPTION"){
alert("数据后台异常！");
}else if(RESULT_STATUS=="MORE_THAN_PAGENUMBER"){
alert("超出最大页数！");
}
}
});
}
$("#li-threety").click(function () {
//首次进入页面--默认获取第一页记录
findPageMakeTable(1);
});
//之后为button点击事件，获取其他页面记录
$(".pageliststy").click(function () {
//得到这个button的值
var thisValue=$(this).val();
if(thisValue=="firstPage"){ //首页
alert("已经是第一页！");
findPageMakeTable(1);
}
else if(thisValue=="lastPage"){ //尾页
alert("已经是最后一页！");
findPageMakeTable(parseInt(pageTotalSize));
}
else if(thisValue=="pageUp"){ //上一页
var valueBackSize=$(this).next().val();
if(valueBackSize==1){
alert("已经是第一页！");
findPageMakeTable(1);
}else{
findPageMakeTable(parseInt(valueBackSize)-1);
$("#labOne").val(parseInt(valueBackSize)-1).html(parseInt(valueBackSize)-1);
$("#labTwo").val(parseInt(valueBackSize)).html(parseInt(valueBackSize));
$("#labThree").val(parseInt(valueBackSize)+1).html(parseInt(valueBackSize)+1);
$("#labFour").val(parseInt(valueBackSize)+2).html(parseInt(valueBackSize)+2);
$("#labFive").val(parseInt(valueBackSize)+3).html(parseInt(valueBackSize)+3);
}
}
else if(thisValue=="pageDown"){ //下一页
var valuePreSize=$(this).prev().val();
if(valuePreSize==pageTotalSize){
alert("已经是最后一页！");
findPageMakeTable(parseInt(pageTotalSize));
}else{
findPageMakeTable(parseInt(valuePreSize)+1);
$("#labOne").val(parseInt(valuePreSize)-3).html(parseInt(valuePreSize)-3);
$("#labTwo").val(parseInt(valuePreSize)-2).html(parseInt(valuePreSize)-2);
$("#labThree").val(parseInt(valuePreSize)-1).html(parseInt(valuePreSize)-1);
$("#labFour").val(parseInt(valuePreSize)).html(parseInt(valuePreSize));
$("#labFive").val(parseInt(valuePreSize)+1).html(parseInt(valuePreSize)+1);
}
}else{ //中间数值点击
findPageMakeTable(thisValue);
}
});效果截图
总结
今天在做项目的时候遇见这个坎儿，以前并没有做过分页查询，只有自己分析逻辑，只要思路清晰，最终肯定是能行的，中途遇见一些问题再慢慢解决。以上代码是Version 1.0版本，只是把功能实现了，并没有再考虑整么设计更合理。楼主是初学者，还请大神们多多指点！
以上是在Controller中分页处理，先取出该条件下所有记录，再在这个总集合中取出相应数据。而以下是我对上次代码进行了改进，在数据库查询时只查询第几页的记录，而不是全部取出
Version 2.0思路
创建一个javaBean类，单独作为分页处理类，包括以下属性：
private int pageNumber; //当前页数，从前端获取
private int pageTotalNumber; //总记录条数
private int totalPage; //总页数
private int pageSize; //每页记录条数
private List countList; //每页记录
private int firstNumber; //分页导航栏--第一个显示的页码
private int lastNumber; //分页导航栏--最后一个显示的页码
private String findInfo; //查询结果 然后在daoImpl类中，查询后返回的是javaBean类对象，把查询结果封装在这个对象中，在Controller中直接 get 结果，把结果传回给前台。下面是详细步骤：
javaBean类设计
package com.SystemMag.entity;
import java.util.List;
/**
* 分页处理
*/
public class PageCompute {
private int pageNumber; //当前页数，从前端获取
private int pageTotalNumber; //总记录条数
private int totalPage; //总页数
private int pageSize; //每页记录条数
private List countList; //每页记录
private int firstNumber; //分页导航栏--第一个显示的页码
private int lastNumber; //分页导航栏--最后一个显示的页码
private String findInfo; //查询结果
public PageCompute(){}
//构造器传入参数，分页导航栏显示页码计算
public PageCompute(int pageNumber,int pageTotalNumber,int pageSize){
this.pageNumber=pageNumber;
this.pageTotalNumber=pageTotalNumber;
this.pageSize=pageSize;
//获取总页数
if(pageTotalNumber%pageSize==0){
this.firstNumber=1;
this.totalPage=pageTotalNumber/pageSize;
}else{
//有余数，那么总页数要+1
this.totalPage=pageTotalNumber/pageSize+1;
}
//分页导航栏--页码显示处理，这里显示5个页码
if(totalPage<=5){
//如果总页数小于或等于5页，令最后一个页码为总页码
this.lastNumber=this.totalPage;
}else{
//以中间页码显示为准
this.firstNumber=pageNumber-2;
this.lastNumber=pageNumber+2;
//排除两种特殊情况
if(this.firstNumber<=0){
this.firstNumber=1;
this.lastNumber=5;
}
if(this.lastNumber>=this.totalPage){
this.firstNumber=totalPage-4;
this.lastNumber=totalPage;
}
}
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getTotalPage() {
return totalPage;
}
public void setFirstNumber(int firstNumber) {
this.firstNumber = firstNumber;
}
public void setLastNumber(int lastNumber) {
this.lastNumber = lastNumber;
}
public int getFirstNumber() {
return firstNumber;
}
public int getLastNumber() {
return lastNumber;
}
public void setPageTotalNumber(int pageTotalNumber) {
this.pageTotalNumber = pageTotalNumber;
}
public void setPageNumber(int pageNumber) {
this.pageNumber = pageNumber;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public void setCountList(List countList) {
this.countList = countList;
}
public int getPageTotalNumber() {
return pageTotalNumber;
}
public int getPageNumber() {
return pageNumber;
}
public int getPageSize() {
return pageSize;
}
public List getCountList() {
return countList;
}
public void setFindInfo(String findInfo) {
this.findInfo = findInfo;
}
public String getFindInfo() {
return findInfo;
}
@Override
public String toString() {
return "PageCompute{" +
"pageNumber=" + pageNumber +
", pageTotalNumber=" + pageTotalNumber +
", totalPage=" + totalPage +
", pageSize=" + pageSize +
", countList=" + countList +
", firstNumber=" + firstNumber +
", lastNumber=" + lastNumber +
", findInfo='" + findInfo + '\'' +
'}';
}
}
daoImpl类中–查询记录
@SuppressWarnings("unchecked")
public PageCompute findLogPageMonth(String logMonth, int pageNumber)throws ExceptionCountents {
int pageSize=10; //每页10条记录
int pageTotalNumber=0;
String jpql="FROM EntityLog log where log.logTime like'%"+logMonth+"%'";
Query query = entityManager.createQuery(jpql);
//第一次查询，获取总记录数
pageTotalNumber=query.getResultList().size();
//初始化构造器，传递参数
PageCompute pageCompute=new PageCompute<>(pageNumber,pageTotalNumber,pageSize);
if(pageTotalNumber!=0){
query.setFirstResult(pageNumber*pageSize-pageSize); //设置从哪里开始查询
query.setMaxResults(pageSize); //设置查询多少条记录
//第二次查询，获取指定页码的记录
pageCompute.setCountList(query.getResultList());
pageCompute.setFindInfo("SUCCESS");
}else{
pageCompute.setFindInfo("NODATA");
}
return pageCompute;
} serviceImpl–传递结果
@Transactional
@SuppressWarnings("unchecked")
public PageCompute findLogPageMonth(String logMonth, int pageNumber)throws Exception{
return userDAO.findLogPageMonth(logMonth,pageNumber);
} Controller–获取结果，传递给前台
/**
* 查询当月记录
* */
@ResponseBody
@RequestMapping(value = "/findLogPageMonth/{logMonth}/{pageNumber}",method = RequestMethod.GET,produces = "text/html;charset=UTF-8")
public String findLogPageMonth(@PathVariable("logMonth")String logMonth,@PathVariable("pageNumber")int pageNumber,Mapmap){
try{
PageCompute entityLogList=null;
entityLogList=userService.findLogPageMonth(logMonth,pageNumber);
if(entityLogList.getFindInfo().equals("SUCCESS")) {
map.put("totalPage", entityLogList.getTotalPage());//记录总页数
map.put("entityLogList", entityLogList.getCountList());//记录
map.put("firstNumber", entityLogList.getFirstNumber());//第一页
map.put("lastNumber", entityLogList.getLastNumber());//最后一页
map.put("RESULT_STATUS", "SUCCESS");
}else{
map.put("RESULT_STATUS", "NODATA");
}
}catch (Exception e){
e.printStackTrace();
map.put("RESULT_STATUS","EXCEPTION");
}
return JSON.toJSONString(map);
} js获取数据–事件触发+显示处理
var pageTotalSize;
//操作日志--制表
function findPageMakeTable(pageNumber) {
//先清空原来table内容
$("#viewPageTable tr:not(:first)").html("");
//得到table主体
var tbody=window.document.getElementById("viewPageBody");
//请求获取数据
$.ajax({
url: 'findLogPageMonth/'+'2017-08/'+pageNumber,
type: 'GET',
contentType: "application/json;charset-utf-8",
dataType: 'text',
data: {},
success:function(data){
var firstNumber,lastNumber;
var str = "";
//转化数据格式
var datalist =JSON.parse(data);
//得到数据结果，进行一个判断
var RESULT_STATUS=datalist.RESULT_STATUS;
if(RESULT_STATUS=="SUCCESS") {
//取数数据记录
var emps = datalist.entityLogList;
//得到数据记录总页数，保存在全局变量中
pageTotalSize=datalist.totalPage;
firstNumber=datalist.firstNumber;
lastNumber=datalist.lastNumber;
$("#pageTotalSizeLabel").html(pageTotalSize);
$("#pageNowLabel").html(pageNumber);
if(pageTotalSize<5){
for(var i=1;i<=pageTotalSize;i++){
$("#lab"+i).val(parseInt(i)).html(parseInt(i));
if(i==pageTotalSize){
for(var j=pageTotalSize+1;j<=5;j++){
$("#lab"+j).css("display","none");
}
}
}
$("#pageUp").css("display","none");
$("#pageDown").css("display","none");
}else{
$(".pageliststy").css("display","initial"); //删除导航栏css效果
$("#lab1").val(parseInt(firstNumber)).html(parseInt(firstNumber));
$("#lab2").val(parseInt(firstNumber)+1).html(parseInt(firstNumber)+1);
$("#lab3").val(parseInt(firstNumber)+2).html(parseInt(firstNumber)+2);
$("#lab4").val(parseInt(firstNumber)+3).html(parseInt(firstNumber)+3);
$("#lab5").val(parseInt(lastNumber)).html(parseInt(lastNumber));
}
for (var i = 0; i < emps.length; i++) {
str += "" +
"" + emps[i].logId + " " +
"" + emps[i].logTime + " " +
"" + emps[i].logIp + " " +
"" + emps[i].logName + " " +
"" + emps[i].logDesc + " " +
" ";
}
//表格内容填写
tbody.innerHTML = str;
}else if(RESULT_STATUS=="EXCEPTION"){
alert("数据后台异常！");
}else if(RESULT_STATUS=="NODATA"){
alert("暂无数据！");
}
}
});
}
$("#li-threety").click(function () {
//进入页面默认获取第一条记录
findPageMakeTable(1);
});
//button点击事件
$(".pageliststy").click(function () {
//得到这个button的值
var thisValue=$(this).val();
if(thisValue=="firstPage"){ //首页
findPageMakeTable(1);
}
else if(thisValue=="lastPage"){ //尾页
findPageMakeTable(parseInt(pageTotalSize));
}
else if(thisValue=="pageUp"){ //上一页
var valueBackSize=$(this).next().val();
if(valueBackSize==1){
findPageMakeTable(1);
}else{
findPageMakeTable(parseInt(valueBackSize)-1);
}
}
else if(thisValue=="pageDown"){ //下一页
var valuePreSize=$(this).prev().val();
if(valuePreSize==pageTotalSize){
findPageMakeTable(parseInt(pageTotalSize));
}else{
findPageMakeTable(parseInt(valuePreSize)+1);
}
}else{ //中间数值点击
findPageMakeTable(thisValue);
}
});jsp页面–显示
<div class="tab-pane active in " id="add-get-bill">
<div>
<table class="table table-condensed table-hover table-striped" id="viewPageTable" style="width: 100%;table-layout:fixed;word-wrap:break-word;font-size: 15px;">
<tr>
<th hidden="hidden">idth>
<th width="200px">时间th>
<th width="200px">操作IPth>
<th width="200px">操作人th>
<th>操作内容th>
tr>
<tbody id="viewPageBody">tbody>
table>
div>
<div class="page_nav">
<span>总共<span id="pageTotalSizeLabel">span> 页span>
<span>当前<span id="pageNowLabel">span> 页span>
<button class="pageliststy" value="firstPage">首页button>
<button class="pageliststy" value="pageUp" id="pageUp">上一页button>
<button class="pageliststy" id="lab1">button>
<button class="pageliststy" id="lab2">button>
<button class="pageliststy" id="lab3">button>
<button class="pageliststy" id="lab4">button>
<button class="pageliststy" id="lab5">button>
<button class="pageliststy" value="pageDown" id="pageDown">下一页button>
<button class="pageliststy" value="lastPage">尾页button>
div>
div>