欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純JS前端實(shí)現(xiàn)分頁(yè)代碼

 更新時(shí)間：2016年06月21日 09:42:48   作者：2778085001  
這篇文章主要介紹了純JS前端實(shí)現(xiàn)分頁(yè)代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

先給大家展示下效果圖，如果大家感覺效果不錯(cuò)，請(qǐng)參考實(shí)現(xiàn)代碼：

因?yàn)檫@是我自己第一次動(dòng)手用js寫分頁(yè)，寫的應(yīng)該也不是很完美，有些公共的沒有抽取出來，但是用起來還是可以的，這塊代碼是可以把它當(dāng)做公共的分頁(yè)去處理的，我就是用這塊代碼寫了兩個(gè)稍微不同一些的分頁(yè)！公共的代碼抽取的也差不多，主要就是ajax后臺(tái)以及返回的值不同而已，只要把總頁(yè)碼的值獲取到，點(diǎn)擊首頁(yè)/下一頁(yè)等傳值正確的話，基本上分頁(yè)是不會(huì)出什么問題的

 網(wǎng)上確實(shí)有很多分頁(yè)的插件以及開源代碼，單本是一個(gè)后臺(tái)開發(fā)猿，前臺(tái)css等樣式還駕馭不住，所以就開始自己去寫了。其實(shí)這個(gè)分頁(yè)原理很簡(jiǎn)單，就是用ajax往后臺(tái)傳值(當(dāng)前頁(yè)碼)，后臺(tái)使用limit進(jìn)行分頁(yè)。

廢話不多說，直接上代碼了！

注：本項(xiàng)目是全程使用js來寫的，前臺(tái)的數(shù)據(jù)通過ajax進(jìn)行獲取，然后再進(jìn)行拼裝，動(dòng)態(tài)加載到頁(yè)面。

1.先把上一頁(yè)，下一頁(yè)等的代碼附上(里面的值都是偽值，下面會(huì)在js里進(jìn)行重新賦值的！)

<ul class="page" id="page">
<li id="shouye" class="p-prev disabled">
<a href='javascript:indexpage(1);'>首 頁(yè)</a>
</li>
<li id="shangyiye" class="p-prev disabled" >
<a href='javascript:indexpage(-1);'><i></i>上一頁(yè)</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);">下一頁(yè)<i></i></a>
</li>
<li id="weiye" class='p-next'>
<a href='javascript:void(0);' onclick="indexpage(0);">尾 頁(yè)</a>
</li>
<li class="total">
<span id="span_number">共13855頁(yè) 到第<input type="text" id="input_number" class="page-txtbox" />頁(yè)
<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.首先在頁(yè)面放兩個(gè)隱藏域，一個(gè)是當(dāng)前頁(yè)碼，一個(gè)是總頁(yè)碼，總頁(yè)碼是頁(yè)面加載完，從后臺(tái)查詢出來后直接附上值的，當(dāng)前頁(yè)碼是沒操作一個(gè)，就要對(duì)當(dāng)前頁(yè)碼賦值

　　<input id="jiazai" type="hidden" ></input><!-- 當(dāng)前頁(yè)碼 -->
<input id="totalpage" type="hidden" ></input><!-- 總頁(yè)碼 -->

3.寫一個(gè)頁(yè)面加載完的function，給總頁(yè)碼和當(dāng)前頁(yè)碼賦值

$(function(){
$('#jiazai').val(1);//給當(dāng)前頁(yè)碼進(jìn)行賦值，默認(rèn)為第一頁(yè)
ajaxfunction(page,arg,chipssort,'');//這個(gè)方法是抽取的ajax后臺(tái)訪問的方法
});

4.抽取的ajax方法，此頁(yè)面會(huì)用到好幾次這個(gè)方法，所有把它收取了出來，因?yàn)轫?yè)面的數(shù)據(jù)時(shí)通過ajax從后臺(tái)獲取到的，后臺(tái)返回的是一個(gè)List集合

//抽取ajax的方法
function ajaxfunction(page,arg,chipssort,fontval){
$.ajax({
type:'POST',
url:'/admin/receptionchips/showlist',//請(qǐng)求的url地址
data:{
page:page,
sort:arg,
chipssort:chipssort,
fontval:fontval
},
dataType:'json',
contentType:'application/x-www-form-urlencoded; charset=utf-8',
success:function(data){
//返回值在進(jìn)行訪問抽取的方法，從后臺(tái)返回
commonfunction(data);
}
});
}

3.代碼看到這也不是很多，最后一個(gè)了

//抽取拼串的方法
function commonfunction(data){
$('#projectlist').find("li").remove();
for (var i=0;i<data.length;i++ )
{ 
/*****因?yàn)榇隧?yè)面是動(dòng)態(tài)加載的，這里主要就是進(jìn)行拼串，代碼也不少，就不漏出來占空間了*****/<br>　　　　　　　　　　
}<br>　　　　　　//開始是分頁(yè)的核心了
if(data.length>0){
//設(shè)置頁(yè)碼
var pading = data[0].padingnum;//總頁(yè)碼
$('#totalpage').val(pading);
var page = $('#jiazai').val();//當(dāng)前頁(yè)
$('#countpage').html("<b id='currentPageNo'>"+page+"</b>/"+pading+"");
$('#span_number').html("共"+pading+"頁(yè) 到第<input type='text' id='input_number' class='page-txtbox' />頁(yè)<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+"");
}
//設(shè)置分頁(yè)的底部 就是 首頁(yè) 1 2 3 4 5 6 尾頁(yè)
var pading = data[0].padingnum;//總頁(yè)碼href="javascript:void(0);"
var nowpage = $('#jiazai').val();//當(dāng)前頁(yè)
//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("已經(jīng)不是第五頁(yè)了");
//設(shè)置中間的為當(dāng)前頁(yè)
$('#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();
//判斷下一頁(yè)是否超過了總頁(yè)數(shù)
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)+'");');
}
//判斷下一頁(yè)的第二頁(yè)是否超過了總頁(yè)數(shù)
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)+'");');
}
}
//如果總頁(yè)數(shù)小于5，這塊代碼主要就是設(shè)置 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();
}
//設(shè)置高亮顯示的，就是是第一頁(yè)時(shí)，1亮，第二頁(yè)時(shí) 2亮
$('#page a').each(function() {
$(this).parent().removeClass("current");
if($(this).text()==nowpage){
$(this).parent().addClass("current");
}
});
//分頁(yè)完返回頁(yè)面頂端
$("html,body").animate({scrollTop:0}, 500);
//最后，給當(dāng)前頁(yè)碼加1
$('#jiazai').val(Number(bianlaing)+Number(1)); 
}


好了，到這里分頁(yè)就完成了，如果你們需要使用的話，可能會(huì)話費(fèi)一會(huì)去理解我的代碼，其實(shí)代碼不難，我是使用了兩個(gè)小時(shí)把它寫完的，只要一行一行代碼看，并且自己再加注釋，把這塊弄過去，不出半小時(shí)絕對(duì)搞定！

相關(guān)文章

最新評(píng)論