js的分页原理以及实现步骤是什么？

2023-02-21 03:48:01JavaScript010

js的分页原理以及实现步骤是什么？,第1张

主要是借鉴了网上一个例子，修改了一些小地方，前端分页的技巧，表格的数据是已经写好了，可以前端渲染表格然后再分页，都是可以的。

其实分页最关键是这两句：

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>

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>

<thead>

<tr>

</tr>

</tr>

</thead>

<td class="td2" >admin</td>

</tr>

</tbody>

</table>

<ul>

</select></li>

</ul>

</div>

/*动态生成用户函数

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里进行重新赋值的！)

</li>

</li>

</li>

</li>

<span id="span_number">共13855页到第<input type="text" id="input_number" class="page-txtbox" />页

</span>

</li>

</ul>

2.首先在页面放两个隐藏域，一个是当前页码，一个是总页码，总页码是页面加载完，从后台查询出来后直接附上值的，当前页码是没操作一个，就要对当前页码赋值

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)

}

温馨提示：js代码中上一页下一页定义的图片根据自己需求可以改的

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：购买的电脑怎么做账？

# 下一篇：js跳转页面几种方法总结