您當前位置：首頁 > web前端 > jquery > 以jQuery為基礎的js分頁代碼

以jQuery為基礎的js分頁代碼

來源：程序員人生發布時間：2014-04-01 03:54:10 閱讀次數：3009次

　　網(LieHuo.Net)教程因為項目需要，今天用了一天時間,開發了一個js分頁控件自認為還算可以，發到網上請朋友們下載使用，“大家好才是真的好”。首先來看一下運行效果如下圖所示。

　　使用也十分的簡單首先引入jQuery.js文件然后考入本程序的代碼：

以下為引用的內容：
<script type="text/javascript">
function showpage(CountPage,PageSize,CurentPage)
{
var tempHTML="";
if(CountPage<=PageSize)
{
if(CurentPage>1)
{
tempHTML = '<a href="javascript:showpage('+CountPage+','+PageSize+','+eval(CurentPage-1)+')">previous</a>';
}
else
{
tempHTML = '<a href="javascript:">previous</a>'
}

for(i=1;i<=CountPage;i++)
{
if(i==CurentPage)
{
tempHTML = tempHTML+' <a href="javascript:">'+i+'</a>';
}
else
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a>';
}
}
if(CurentPage<CountPage)
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+eval(CurentPage+1)+')">Next</a>';
}
else
{
tempHTML = tempHTML+'<a href="javascript:">Next</a>';
}
$("#pagelist").html(tempHTML);
return;
}

//頭
if(CurentPage>1)
{
tempHTML = '<a href="javascript:showpage('+CountPage+','+PageSize+','+eval(CurentPage-1)+')">previous</a>';
}
else
{
tempHTML = '<a href="javascript:">previous</a>';
}
if(CurentPage==1)
{
tempHTML = tempHTML+'<a href="javascript:">1</a>';
}
else
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+',1)">1</a>';
}
var LeftCount=0;
var RightCount=0;
var IfDOT_L=0;
var IfDOT_R=0;
var middle = parseInt(PageSize/2);

LeftCount=CurentPage-1;
RightCount = CountPage-CurentPage;

if((LeftCount>middle)&&(RightCount>middle))
{
LeftCount = middle;
RightCount= PageSize-1-LeftCount;
IfDOT_L=1;
IfDOT_R=1;
}
else
{
if(LeftCount<RightCount)
{
if(LeftCount>parseInt(PageSize/2))
{
LeftCount = parseInt(PageSize/2);
}
RightCount = PageSize-1-LeftCount;
}
else
{
if(RightCount>parseInt(PageSize/2))
{
RightCount = parseInt(PageSize/2);
}
LeftCount = PageSize-1-RightCount;
}
if(CurentPage-1>LeftCount)
{
IfDOT_L=1;
}
if(CountPage-CurentPage>RightCount)
{
IfDOT_R=1;
}
}

//左側
if(IfDOT_L==1)
{
tempHTML = tempHTML+"...";
for(i=CurentPage-LeftCount+2;i<CurentPage;i++)
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a>';
}
}
else
{
for(i=2;i<CurentPage;i++)
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a>';
}
}

//當前頁
if(CurentPage!=1&&CurentPage!=CountPage)
{
tempHTML = tempHTML+'<a href="javascript:">'+CurentPage+'</a>';
}
//右側
if(IfDOT_R==1)
{
for(i=CurentPage+1;i<CurentPage+RightCount-1;i++)
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a>';
}
tempHTML = tempHTML+"...";
}
else
{
for(i=CurentPage+1;i<CurentPage+RightCount;i++)
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a>';
}
}

//尾
if(CurentPage==CountPage)
{
tempHTML = tempHTML+'<a href="javascript:">'+CountPage+'</a>';
}
else
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+CountPage+')">'+CountPage+'</a>';
}
if(CurentPage<CountPage)
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+eval(CurentPage+1)+')">Next</a>';
}
else
{
tempHTML = tempHTML+'<a href="javascript:">Next</a>';
}
$("#pagelist").html(tempHTML);
}
</script>

　　調用時主要使用如下調用
　　showpage(100,13,4);
　　其中第一個參數表示分頁總數，第二個參數表示當前頁面顯示的頁碼數，第三個參數表示當前頁。

　　源文件下載地址：點擊下載此文件

　　文章來自：http://www.cnblogs.com/studyplay/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 Sybase數據庫修復及 sa 用戶口令的恢復

下一篇 從“車震門”事件閑談互聯網事件營銷

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

以jQuery為基礎的js分頁代碼