①:我们知道,分页需要后台的数据支持和前台的样式处理.那么后台应该做什么呢?我们知道,要想在后台查询数据,前台应该给后台传入两个参数,分别是当前页码和每页显示的记录数我们在前台把这两个参数封装在搜索条件选项里,在后台接收首先进行的就是需要进行判断,如果这两个的值是空的话,我们应该给他们设置默认值,这样就不会出现没有数据的情况了
②:进行了判断之后,我们需要加上两个条件,才能在dao层完成分页,其实就是在query中设置值,分别是设置setOffset:从第几条记录开始查询(这个数的值是:(当前页-1)*每页显示的记录数)和setRows(每页显示的记录数)
③:我们加上了条件之后,返回的数据中就会有关于分页的数据,我们定义一个Map集合,把关于分页的数据放进这个Map集合中就可以了我们需要的数据是:总页数:getTotalPage 总记录数:getTotalElements 每页显示的记录数据:getContent 最后再返回这个amp集合,这样前台就能获取后台的分页数据了
①:其实这个分页的难点就在前台js的controller中的处理,我后台的返回结果中有总记录数和总页数了,我们想要在前台显示多少页,怎么控制呢?很简单,我们如果有起始页和末尾页,然后我们根据这两个值进行遍历,然后把每个值放进同一个数组中,我们在前台页面用ng-repeat遍历取值就行了
②:那么我们就想了,我们想在前台页面框显示几页呢?这就有了两种情况:一种是奇数,我们让当前页的前面和后面有这个奇数减去1再除以2,这样就有了我们想要的页数另一种是偶数,偶数比奇数麻烦一点,我们采用一个规则:前面少,后面多,比如10页,我们就让当前页前4后5这样一来,我们只要判断一下我们想要显示的页数的奇偶性,然后就能算出起始页了,末尾页就等于起始页加上显示页数-1就行了
③:要注意的事:我们要考虑集中情况:一种是当前页的前面不足我们想要的页数,我们就让起始页等于1一种是当前页的后面不足我们想要的页数,我们就要让末尾页数等于总页数(最大页数)还有就是我们在设置了末尾页后,要重新设值初始页(因为如果当前页数后面不足我们想要的,那么一开始计算的初始页就是不对的,就会导致显示的页数不足),为了处理这种情况,我们利用末尾页减去要显示的页数-1,然后判断是不是小于等于1,是就让初始页等于1,大于1就让初始页等于末尾页减去要显示的页数-1
④:我们在js的controller中设置一个构建分页数据的方法,方法的参数是我们想要显示的页数,然后根据传入的数进行判断,用三元运算式进行赋值得出初始页和末尾页,然后遍历望数组中放入值就可以了这样一来,我们想要修改显示的页数,修改传入的数就行了
⑤:再就是处理上一页\下一页和页面跳转的功能,我们需要在js的controller中创建一个方法,这个方法是根据页码查询分页数据的方法,这个方法中首先是要判断传入的页码是不是小于1或者大于总页数,如果是就打断程序如果不是就给搜索条件中的当前页赋值,然后在调用查询方法,加载分页数据
⑥:最后就在页面中的上一页\下一页和跳转页面的上面,添加ng-click调用我们根据页码查询的方法还有一个不要忘了,就是我们点击当前页也加上方法,里面传入的是当前页码还有不要忘了在查询方法中,在查询业务执行之前,把当前页进行一下parseInt的转换,防止传到后台的是字符串
其实做完上面的这些操作,基本的功能都已经实现了,不过有一些小得bug或者功能需要去优化
①:第一个需要优化的就是:跳转之后,当前页不刷新的问题.这个问题就是我们在上一个搜索结果中跳转完页面,比如说是共有10页,我们跳到第九页,然后我们再搜索下一个,如果这个搜索结果不足九页就不会显示换句话说就是开启新的搜索时,当前页没有刷新,我们需要保证在每次开始搜索之前初始化一下当前页,所以在body标签中ng-init里让当前页为1就行了
②:上一页和下一页的disabled属性:这个属性是为了让我们的上一页在第一页的时候显示固定的样式,并且不能使用,同理下一页是在最后一页时失效想要到达这个效果,我们控制上一页和下一页的disabled的出现时机就行了,我们用{{条件?'disabled':''}}这样就能解决这个问题了
③:省略号的显示:如果起始页前面还有页码就显示省略号,没有就不显示末尾页后面如果没有页码了,就不显示,还有就显示省略号.为了好理解,我们在js的controller中创建两个变量,这两个变量开始的时候都是true,当起始页<=1或者末尾页>总页数时,改变对应的变量为false然后在页面中的省略号位置,用ng-if调用对应的变量就行了
主要是借鉴了网上一个例子，修改了一些小地方，前端分页的技巧，表格的数据是已经写好了，可以前端渲染表格然后再分页，都是可以的。
其实分页最关键是这两句：
var startRow = (currentPage - 1) * pageSize+1 //currentPage 为当前页，pageSize为每页显示的数据量
var endRow = currentPage * pageSize
找到我们需要显示的行的范围（starRow~endRow）
ps:这里在跳转的时候遇到了一个小BUG，就是获取到的select的value值是string类型的，比如获取到了1，然后你想再加1的时候就会变成"11" 而不是我们想要的"2"，所以这里需要用parseInt( )来转换一下，小细节需要注意呀！！！
效果图：
[javascript] view plain copy print?
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
a{
text-decoration: none
}
.table2{
border:#C8C8C8 solid
border-width:1px 0px 0px 1px
background: #F3F0F0
margin-top:25px
}
.td0{
border:#C8C8C8 solid
border-width:0 0 1px 0
}
.td2{
border:#C8C8C8 solid
border-width:0 1px 1px 0
}
.barcon {
width: 1000px
margin: 0 auto
text-align: center
}
.barcon1 {
font-size: 17px
float: left
margin-top: 20px
}
.barcon2 {
float: right
}
.barcon2 ul {
margin: 20px 0
padding-left: 0
list-style: none
text-align: center
}
.barcon2 li {
display: inline
}
.barcon2 a {
font-size: 16px
font-weight: normal
display: inline-block
padding: 5px
padding-top: 0
color: black
border: 1px solid #ddd
background-color: #fff
}
.barcon2 a:hover{
background-color: #eee
}
.ban {
opacity: .4
}
</style>
</head>
<body>
<table width="950" cellpadding="0" cellspacing="0" class="table2" align="center">
<thead>
<tr>
<td colspan="3" height="33" class="td0"> </td>
<td align="center" class="td2"><a href="###">添加用户</a></td>
</tr>
<tr align="center">
<th width="150" height="33" class="td2">序号</th>
<th width="300" class="td2">用户名</th>
<th width="250" class="td2">权限</th>
<th width="250" class="td2">操作</th>
</tr>
</thead>
<tbody id="adminTbody">
<tr align="center">
<td class="td2" height="33" width="150">1</td>
<td class="td2" >admin</td>
<td class="td2" >管理员</td>
<td class="td2" ><a href="###">修改</a></td>
</tr>
</tbody>
</table>
<div id="barcon" class="barcon" >
<div id="barcon1" class="barcon1"></div>
<div id="barcon2" class="barcon2">
<ul>
<li><a href="###" id="firstPage">首页</a></li>
<li><a href="###" id="prePage">上一页</a></li>
<li><a href="###" id="nextPage">下一页</a></li>
<li><a href="###" id="lastPage">尾页</a></li>
<li><select id="jumpWhere">
</select></li>
<li><a href="###" id="jumpPage" onclick="jumpPage()">跳转</a></li>
</ul>
</div>
</div>
<script src="jquery.js"></script>
<script>
/*动态生成用户函数
num为生成的用户数量
*/
function dynamicAddUser(num){
for(var i=1i<=numi++)
{
var trNode=document.createElement("tr")
$(trNode).attr("align","center")
//序号
var tdNodeNum=document.createElement("td")
$(tdNodeNum).html(i+1)
tdNodeNum.style.width = "150px"
tdNodeNum.style.height = "33px"
tdNodeNum.className = "td2"
//用户名
var tdNodeName=document.createElement("td")
$(tdNodeName).html("lzj"+i)
tdNodeName.style.width = "300px"
tdNodeName.className = "td2"
//权限
var tdNodePri=document.createElement("td")
tdNodePri.style.width = "250px"
tdNodePri.className = "td2"
var priText=document.createElement("span")
$(priText).css({"display":"inline-block","text-align":"center"})
$(priText).text("普通用户")
tdNodePri.appendChild(priText)
//操作
var tdNodeOper = document.createElement("td")
tdNodeOper.style.width = "170px"
tdNodeOper.className = "td2"
var editA = document.createElement("a")
$(editA).attr("href", "###").text("编辑")
$(editA).css({ display: "inline-block" })
tdNodeOper.appendChild(editA)
trNode.appendChild(tdNodeNum)
trNode.appendChild(tdNodeName)
trNode.appendChild(tdNodePri)
trNode.appendChild(tdNodeOper)
$("#adminTbody")[0].appendChild(trNode)
}
}
$(function(){
dynamicAddUser(80)
goPage(1,10)
var tempOption=""
for(var i=1i<=totalPagei++)
{
tempOption+='<option value='+i+'>'+i+'</option>'
}
$("#jumpWhere").html(tempOption)
})
/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/
var pageSize=0//每页显示行数
var currentPage_=1//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
var totalPage//总页数
function goPage(pno,psize){
var itable = document.getElementById("adminTbody")
var num = itable.rows.length//表格所有行数(所有记录数)
pageSize = psize//每页显示行数
//总共分几页
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1
}else{
totalPage=parseInt(num/pageSize)
}
var currentPage = pno//当前页数
currentPage_=currentPage
var startRow = (currentPage - 1) * pageSize+1
var endRow = currentPage * pageSize
endRow = (endRow > num)? num : endRow
//遍历显示数据实现分页
/*for(var i=1i<(num+1)i++){
var irow = itable.rows[i-1]
if(i>=startRow && i<=endRow){
irow.style.display = ""
}else{
irow.style.display = "none"
}
}*/
$("#adminTbody tr").hide()
for(var i=startRow-1i<endRowi++)
{
$("#adminTbody tr").eq(i).show()
}
var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页"
document.getElementById("barcon1").innerHTML = tempStr
if(currentPage>1){
$("#firstPage").on("click",function(){
goPage(1,psize)
}).removeClass("ban")
$("#prePage").on("click",function(){
goPage(currentPage-1,psize)
}).removeClass("ban")
}else{
$("#firstPage").off("click").addClass("ban")
$("#prePage").off("click").addClass("ban")
}
if(currentPage<totalPage){
$("#nextPage").on("click",function(){
goPage(currentPage+1,psize)
}).removeClass("ban")
$("#lastPage").on("click",function(){
goPage(totalPage,psize)
}).removeClass("ban")
}else{
$("#nextPage").off("click").addClass("ban")
$("#lastPage").off("click").addClass("ban")
}
$("#jumpWhere").val(currentPage)
}
function jumpPage()
{
var num=parseInt($("#jumpWhere").val())
if(num!=currentPage_)
{
goPage(num,pageSize)
}
}
</script>
</body>
</html>
纯js实现分页方法一：废话不多说，直接上代码了！
注：本项目是全程使用js来写的，前台的数据通过ajax进行获取，然后再进行拼装，动态加载到页面。
1.先把上一页，下一页等的代码附上(里面的值都是伪值，下面会在js里进行重新赋值的！)
<ul class="page" id="page">
<li id="shouye" class="p-prev disabled">
<a href='javascript:indexpage(1)'>首 页</a>
</li>
<li id="shangyiye" class="p-prev disabled" >
<a href='javascript:indexpage(-1)'><i></i>上一页</a>
</li>
<li ><a id="one" href="javascript:void(0)" >1</a></li>
<li><a id="two" href="javascript:void(0)" >2</a></li>
<li><a id="three" href="javascript:void(0)" >3</a></li>
<li class="more"><a id="five" href="javascript:void(0)" >...</a></li>
<li><a id="fore" href="javascript:void(0)" >13855</a></li>
<li class='p-next'>
<a href='javascript:indexpage(-3)' onclick="jumpToPage('2','/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback)">下一页<i></i></a>
</li>
<li id="weiye" class='p-next'>
<a href='javascript:void(0)' onclick="indexpage(0)">尾 页</a>
</li>
<li class="total">
<span id="span_number">共13855页 到第<input type="text" id="input_number" class="page-txtbox" />页
<input name="" value="确定" type="button" onclick="jumpToPage(jQuery('#input_number').val(),'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback)" class="page-btn"/>
</span>
</li>
</ul>
2.首先在页面放两个隐藏域，一个是当前页码，一个是总页码，总页码是页面加载完，从后台查询出来后直接附上值的，当前页码是没操作一个，就要对当前页码赋值
<input id="jiazai" type="hidden" ></input><!-- 当前页码 -->
<input id="totalpage" type="hidden" ></input><!-- 总页码 -->
3.写一个页面加载完的function，给总页码和当前页码赋值
$(function(){
$('#jiazai').val(1)//给当前页码进行赋值，默认为第一页
ajaxfunction(page,arg,chipssort,'')//这个方法是抽取的ajax后台访问的方法
})
4.抽取的ajax方法，此页面会用到好几次这个方法，所有把它收取了出来，因为页面的数据时通过ajax从后台获取到的，后台返回的是一个List集合
//抽取ajax的方法
function ajaxfunction(page,arg,chipssort,fontval){
$.ajax({
type:'POST',
url:'/admin/receptionchips/showlist',//请求的url地址
data:{
page:page,
sort:arg,
chipssort:chipssort,
fontval:fontval
},
dataType:'json',
contentType:'application/x-www-form-urlencodedcharset=utf-8',
success:function(data){
//返回值在进行访问抽取的方法，从后台返回
commonfunction(data)
}
})
}
5.代码看到这也不是很多，最后一个了
//抽取拼串的方法
function commonfunction(data){
$('#projectlist').find("li").remove()
for (var i=0i<data.lengthi++ )
{
/*****因为此页面是动态加载的，这里主要就是进行拼串，代码也不少，就不漏出来占空间了*****/<br>
}<br>//开始是分页的核心了
if(data.length>0){
//设置页码
var pading = data[0].padingnum//总页码
$('#totalpage').val(pading)
var page = $('#jiazai').val()//当前页
$('#countpage').html("<b id='currentPageNo'>"+page+"</b>/"+pading+"")
$('#span_number').html("共"+pading+"页 到第<input type='text' id='input_number' class='page-txtbox' />页<input name='' value='确定' type='button' onclick='indexpage(-2)'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','"+pading+"', listPageCallback)' class='page-btn'/>")
}else{
$('#countpage').html("<b id='currentPageNo'>"+0+"</b>/"+0+"")
}
//设置分页的底部 就是 首页 1 2 3 4 5 6 尾页
var pading = data[0].padingnum//总页码href="javascript:void(0)"
var nowpage = $('#jiazai').val()//当前页
//one two three five fore<br>//下面代码看着是比较麻烦，但是也不难理解 全是一样的代码，只不过是加了些判断
if(nowpage<5 ){
$('#one').text(1)
$('#one').attr('href','javascript:pagenum("'+1+'")')
$('#two').text(2)
$('#two').attr('href','javascript:pagenum("'+(2)+'")')
$('#three').text(3)
$('#three').attr('href','javascript:pagenum("'+(3)+'")')
$('#five').text(4)
$('#five').attr('href','javascript:pagenum("'+(4)+'")')
$('#fore').text(5)
$('#fore').attr('href','javascript:pagenum("'+(5)+'")')
$('#five').parent().show()
$('#fore').parent().show()
}else{
//alert("已经不是第五页了")
//设置中间的为当前页
$('#one').text(Number(nowpage)-2)
$('#one').attr('href','javascript:indexpage("'+(Number(nowpage)-2)+'")')
$('#two').text(Number(nowpage)-1)
$('#two').attr('href','javascript:indexpage("'+(Number(nowpage)-1)+'")')
$('#three').text(nowpage)
$('#three').attr('href','javascript:indexpage("'+(nowpage)+'")')
$('#five').parent().show()
$('#fore').parent().show()
//判断下一页是否超过了总页数
if(Number(nowpage)+1>pading){
$('#five').parent().hide()
$('#fore').parent().hide()
}else{
$('#five').parent().show()
$('#five').text(Number(nowpage)+1)
$('#five').attr('href','javascript:indexpage("'+(Number(nowpage)+1)+'")')
}
//判断下一页的第二页是否超过了总页数
if(Number(nowpage)+2>pading){
$('#fore').parent().hide()
}else{
$('#fore').parent().show()
$('#fore').text(Number(nowpage)+2)
$('#fore').attr('href','javascript:indexpage("'+(Number(nowpage)+2)+'")')
}
}
//如果总页数小于5，这块代码主要就是设置 1 2 3 4 5 这些的显示和隐藏的
if(pading==0){
$('#one').parent().hide()
$('#two').parent().hide()
$('#three').parent().hide()
$('#five').parent().hide()
$('#fore').parent().hide()
}else if(pading==1){
$('#shouye').hide()
$('#weiye').hide()
$('#one').parent().hide()
$('#two').parent().hide()
$('#three').parent().hide()
$('#five').parent().hide()
$('#fore').parent().hide()
}else if(pading==2){
$('#one').parent().show()
$('#two').parent().show()
$('#three').parent().hide()
$('#five').parent().hide()
$('#fore').parent().hide()
}else if(pading==3){
$('#one').parent().show()
$('#two').parent().show()
$('#three').parent().show()
$('#five').parent().hide()
$('#fore').parent().hide()
}else if(pading==4){
$('#one').parent().show()
$('#two').parent().show()
$('#three').parent().show()
$('#five').parent().show()
$('#fore').parent().hide()
}else{
$('#one').parent().show()
$('#two').parent().show()
$('#three').parent().show()
$('#five').parent().show()
$('#fore').parent().show()
}
//设置高亮显示的，就是是第一页时，1亮，第二页时 2亮
$('#page a').each(function() {
$(this).parent().removeClass("current")
if($(this).text()==nowpage){
$(this).parent().addClass("current")
}
})
//分页完返回页面顶端
$("html,body").animate({scrollTop:0}, 500)
//最后，给当前页码加1
$('#jiazai').val(Number(bianlaing)+Number(1))
}
纯js实现分页方法二：
function goPage(pno,psize){
var itable = document.getElementById("idData")
var num = itable.rows.length//表格行数
var totalPage = 0//总页数
var pageSize = psize//每页显示行数
if((num-1)/pageSize >parseInt((num-1)/pageSize)){
totalPage=parseInt((num-1)/pageSize)+1
}else{
totalPage=parseInt((num-1)/pageSize)
}
var currentPage = pno//当前页数
var startRow = (currentPage - 1) * pageSize+1//开始显示的行
var endRow = currentPage * pageSize+1//结束显示的行
endRow = (endRow >num)? num : endRow
//前三行始终显示
for(i=0i<1i++){
var irow = itable.rows[i]
irow.style.display = "block"
}
for(var i=1i<numi++){
var irow = itable.rows[i]
if(i>=startRow&&i<endRow){
irow.style.display = "block"
}else{
irow.style.display = "none"
}
}
var pageEnd = document.getElementById("pageEnd")
var tempStr = ""
if(currentPage>1){
tempStr += "<a href="/" mce_href="/""#/" onmouseout='MM_swapImgRestore()' onmouseover=/"MM_swapImage('Image69','','images/back_buttom01_dowm.jpg',1)/" onClick=/"goPage("+(currentPage-1)+","+psize+")/"><img src="/" mce_src="/""images/back_buttom01.jpg/" name='Image69' width='38' height='15' border='0' id='Image69' /></a>"
}else{
tempStr += "<a href="/" mce_href="/""#/" onmouseout='MM_swapImgRestore()' onmouseover=/"MM_swapImage('Image69','','images/back_buttom01_dowm.jpg',1)/"><img src="/" mce_src="/""images/back_buttom01.jpg/" name='Image69' width='38' height='15' border='0' id='Image69' /></a>"
}
for (var i = 1i <= totalPagei++) {
if (i == currentPage) {
tempStr += i+" "
} else {
tempStr += "<a href="/" mce_href="/""#/" onClick=/"goPage("+(i)+","+psize+")/">"+i+"</a>"
}
}
if(currentPage<totalPage){
tempStr += "<a href="/" mce_href="/""#/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image68','','images/next_buttom01_dowm.jpg',1)/" onClick=/"goPage("+(currentPage+1)+","+psize+")/"><img src="/" mce_src="/""images/next_buttom01.jpg/" name='Image68' width='38' height='15' border='0' id='Image68' /></a>"
}else{
tempStr += "<a href="/" mce_href="/""#/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image68','','images/next_buttom01_dowm.jpg',1)/"><img src="/" mce_src="/""images/next_buttom01.jpg/" name='Image68' width='38' height='15' border='0' id='Image68' /></a>"
}
tempStr +="<a href="/" mce_href="/""#top/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image20','','images/top_buttom01_dowm.jpg',1)/"><img src="/" mce_src="/""images/top_buttom01.jpg/" name='Image20' width='38' height='15' border='0' id='Image20' /></a>"
document.getElementById("barcon").innerHTML = tempStr
}
var base='<%=base%>'
window.onload = function(){
goPage(1,10)
}
<div id="barcon" name="barcon"></div>
温馨提示：js代码中上一页 下一页定义的图片根据自己需求可以改的
