jQuery實(shí)現(xiàn)的簡單分頁示例
更新時間：2016年06月01日 12:50:44 作者：鄭文亮
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單分頁,涉及jQuery數(shù)學(xué)運(yùn)算與頁面元素操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)的簡單分頁。分享給大家供大家參考，具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS分頁Class - 風(fēng)干的果子</title>
<style type="text/css">
a {margin:3px; text-decoration:none;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
//jquery頁面加載開始
$(function()
{
var pageDiv1=new jsPage("list","all","p1","3");
pageMethod.call(pageDiv1);
var pageDiv2=new jsPage("list2","all","p2","5");
pageMethod.call(pageDiv2);
})//$
//jquery 頁面加載結(jié)束
//方法: pageMethod
function pageMethod()
{
var obj=this;
obj.resetTotal();
obj.reloadpage("1",obj.list_class);
obj.page(); //生成頁碼
ready2go.call(obj);
}
//方法:ready2go
function ready2go()
{
var obj=this;
$("#"+obj.page_obj_id+" a").live("click",function()
{ //點(diǎn)擊頁碼的時候跳到相應(yīng)頁
obj.target_p=parseInt($(this).attr("p"));
gotopage.call(obj,obj.target_p);
})
}
// 方法: showClass
function showClass(list,x,pDiv,pSize){
var pObj=new jsPage(list,x,pDiv,pSize);
pageMethod.call(pObj);
}
// 方法: jsPage
function jsPage(list_id,list_class,page_obj_id,pagesize)
{
// list_id 結(jié)果集UL的id
// list_class 要顯示的類別
// page_id 存放頁碼的id
// pagesize 每頁顯示多少條
this.list_obj_id=list_id;
this.list_Obj=$("#"+list_id);
this.li=$("#"+list_id+" li");
this.li.hide();
this.page_obj_id=page_obj_id;
this.page_obj=$("#"+page_obj_id); //存放頁碼的div
this.list_class=list_class; // 類別
if(list_class=="all")
{
this.results=this.li.length; // 總記錄數(shù)等于所有記錄
}
else
{
this.results=$("#"+list_id+" li."+list_class).length; // 總記錄數(shù)等于指定類別的li數(shù)
}
this.totalpage; // 總頁數(shù)
this.pagesize=pagesize; //每頁記錄數(shù)
this.cpage=1; //當(dāng)前頁,默認(rèn)顯示第一頁
this.count;
this.target_p;
this.curcount;
this.outstr= ""; // 輸出頁碼html
}//jsPage結(jié)束
//方法: gotopage
function gotopage(target){
this.cpage = target; //把頁面計(jì)數(shù)定位到第幾頁
this.page();
this.reloadpage(target,this.list_class);
}
//給對象jsPage 增加函數(shù) reloadpage
jsPage.prototype.reloadpage=function(p,resultType)
{
this.li.hide();
for(var i=this.pagesize*p-this.pagesize;i<this.pagesize*p;i++)
{
if(resultType=="all")
{
this.li.eq(i).show();
}else
{
$("#"+this.list_obj_id+" li."+resultType).eq(i).show();
}
}
}
//給對象jsPage 增加函數(shù) resetTotal
jsPage.prototype.resetTotal=function()
{
if(this.results==0){
this.totalpage=0;
this.cpage=0;
}else if(this.results<=this.pagesize)
{
this.totalpage=1;
}
else if(parseInt(this.results/this.pagesize)==1)
{
this.totalpage=2;
}
else if(parseInt(this.results/this.pagesize)>1 && this.results%this.pagesize==0){
this.totalpage=this.results/this.pagesize;
}
else
{
this.totalpage=parseInt(this.results/this.pagesize)+1;
}
}//resetTotal()
//jsPage 對象增加函數(shù) page
jsPage.prototype.page=function()
{
if(this.totalpage<=10)
{ //總頁數(shù)小于十頁 頁碼以十頁為單位
for (this.count=1;this.count<=this.totalpage;this.count++)
{
if(this.count!=this.cpage)
{
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
}else
{
this.outstr = this.outstr + "<span class='current' >"+this.count+"</span>";
}
}
}
if(this.totalpage>10)
{ //總頁數(shù)大于十頁
if(parseInt((this.cpage-1)/10) == 0)
{
for (this.count=1;this.count<=10;this.count++)
{
if(this.count!=this.cpage)
{
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
}
else
{
this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>";
}
}
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >»</a>";
}
else if(parseInt((this.cpage-1)/10) == parseInt(this.totalpage/10))
{
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+(parseInt((this.cpage-1)/10)*10)+"' >«<\/a>";
for (this.count=parseInt(this.totalpage/10)*10+1;this.count<=this.totalpage;this.count++)
{
if(this.count!=this.cpage)
{
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
}
else
{
this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>";
}
}
}
else
{
var lastP;
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+(parseInt((this.cpage-1)/10)*10)+"' >«<\/a>";
for (this.count=parseInt((this.cpage-1)/10)*10+1;this.count<=parseInt((this.cpage-1)/10)*10+10;this.count++)
{
if(this.count!=this.cpage)
{
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
}
else
{
this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>";
}
if(this.count==this.totalpage)
{
lastP="";
}
else
{
lastP="<a href='javascript:void(0)' p='"+(this.count+1)+"' >»</a>";
}
}
this.outstr = this.outstr + lastP;
}
}
document.getElementById(this.page_obj_id).innerHTML = "<div><span id='info'>共"+this.totalpage+"頁 第"+this.cpage+"頁<\/span>" + this.outstr + "<\/div>";
this.outstr = "";
}
</script>
</head>
<body>
<a onclick="showClass('list','mm','p1','3')" href="#">美女</a> <a onclick="showClass('list','gg','p1','3')"
href="#">帥哥</a> <a onclick="showClass('list','all','p1','3')" href="#">全部</a><br />
<ul id="list">
<li class="mm">美女A</li>
<li class="gg">帥哥A</li>
<li class="mm">美女B</li>
<li class="gg">帥哥B</li>
<li class="mm">美女C</li>
<li class="gg">帥哥C</li>
<li class="mm">美女D</li>
<li class="gg">帥哥D</li>
<li class="mm">美女E</li>
<li class="gg">帥哥E</li>
<li class="mm">美女F</li>
<li class="gg">帥哥F</li>
<li class="mm">美女G</li>
<li class="gg">帥哥G</li>
<li class="mm">美女H</li>
<li class="gg">帥哥H</li>
<li class="mm">美女A</li>
<li class="gg">帥哥A</li>
<li class="mm">美女B</li>
<li class="gg">帥哥B</li>
<li class="mm">美女C</li>
<li class="gg">帥哥C</li>
<li class="mm">美女D</li>
<li class="gg">帥哥D</li>
<li class="mm">美女E</li>
<li class="gg">帥哥E</li>
<li class="mm">美女F</li>
<li class="gg">帥哥F</li>
<li class="mm">美女G</li>
<li class="gg">帥哥G</li>
<li class="mm">美女H</li>
<li class="gg">帥哥H</li>
<li class="mm">美女A</li>
<li class="gg">帥哥A</li>
<li class="mm">美女B</li>
<li class="gg">帥哥B</li>
<li class="mm">美女C</li>
<li class="gg">帥哥C</li>
<li class="mm">美女D</li>
<li class="gg">帥哥D</li>
<li class="mm">美女E</li>
<li class="gg">帥哥E</li>
<li class="mm">美女F</li>
<li class="gg">帥哥F</li>
<li class="mm">美女G</li>
<li class="gg">帥哥G</li>
<li class="mm">美女H</li>
<li class="gg">帥哥H</li>
<li class="mm">美女A</li>
<li class="gg">帥哥A</li>
<li class="mm">美女B</li>
<li class="gg">帥哥B</li>
<li class="mm">美女C</li>
<li class="gg">帥哥C</li>
<li class="mm">美女D</li>
<li class="gg">帥哥D</li>
<li class="mm">美女E</li>
<li class="gg">帥哥E</li>
<li class="mm">美女F</li>
<li class="gg">帥哥F</li>
<li class="gg">帥哥G</li>
<li class="gg">帥哥H</li>
<li class="gg">帥哥G</li>
</ul>
<br />
<div id="p1">
</div>
<br />
<br />
<a onclick="showClass('list2','music','p2','5')" href="#">音樂</a> <a onclick="showClass('list2','movie','p2','5')"
href="#">電影</a> <a onclick="showClass('list2','all','p2','5')" href="#">全部</a><br />
<ul id="list2">
<li class="music">音樂A</li>
<li class="movie">電影A</li>
<li class="music">音樂B</li>
<li class="movie">電影B</li>
<li class="music">音樂C</li>
<li class="movie">電影C</li>
<li class="music">音樂D</li>
<li class="movie">電影D</li>
<li class="music">音樂E</li>
<li class="movie">電影E</li>
<li class="music">音樂F</li>
<li class="movie">電影F</li>
</ul>
<br />
<div id="p2">
</div>
</body>
</html>
PS：這里再為大家推薦幾款代碼格式化、美化工具，相信大家在以后的開發(fā)過程中會用得到：
在線JavaScript代碼美化、格式化工具：
http://tools.jb51.net/code/js
JavaScript壓縮/格式化/加密工具：
http://tools.jb51.net/code/jscompress
PHP代碼在線格式化美化工具：
http://tools.jb51.net/code/phpformat
XML代碼在線格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat
在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具：
http://tools.jb51.net/code/json
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 基于Bootstrap和jQuery構(gòu)建前端分頁工具實(shí)例代碼
- jQuery前端分頁示例分享
- Ajax分頁插件Pagination從前臺jQuery到后端java總結(jié)
- jQuery DataTables插件自定義Ajax分頁實(shí)例解析
- MVC+jQuery.Ajax異步實(shí)現(xiàn)增刪改查和分頁
- 利用jQuery中的ajax分頁實(shí)現(xiàn)代碼
- jQuery ajax分頁插件實(shí)例代碼
- 使用JQuery實(shí)現(xiàn)的分頁插件分享
- 使用Jquery+Ajax+Json如何實(shí)現(xiàn)分頁顯示附JAVA+JQuery實(shí)現(xiàn)異步分頁
- 前端分頁功能的實(shí)現(xiàn)以及原理（jQuery）
相關(guān)文章
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR錯誤
今天測試偶然發(fā)現(xiàn)jquery.bgiframe.js在IE9環(huán)境下提示錯誤，于是很是好奇，想辦法知道究竟，于是搜索了一下，現(xiàn)在與大家分享希望可以幫助你們2013-01-01
jWiard 基于JQuery的強(qiáng)大的向?qū)Э丶榻B
jWiard 基于JQuery的強(qiáng)大的向?qū)Э丶榻B，需要的朋友可以參考下。2011-10-10
jquery學(xué)習(xí)筆記之無new構(gòu)建詳解
大部分人使用 jQuery 的時候都是使用第一種無 new 的構(gòu)造方式，直接 $('') 進(jìn)行構(gòu)造，這也是 jQuery 十分便捷的一個地方。這篇文章主要給大家介紹了關(guān)于jquery學(xué)習(xí)筆記之無new構(gòu)建的相關(guān)資料，需要的朋友們下面來一起看看吧。2017-12-12
這篇文章主要介紹了jquery的方法屬性,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-11-11
關(guān)于兩個jQuery(js)特效沖突的bug的解決辦法
下面小編就為大家?guī)硪黄P(guān)于兩個jQuery(js)特效沖突的bug的解決辦法。小編覺得挺不錯的，現(xiàn)在就分享 給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
基于pthread_create,readlink,getpid等函數(shù)的學(xué)習(xí)與總結(jié)
以下是對pthread_create,readlink,getpid等函數(shù)的用法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下2013-07-07
jquery中防刷IP流量軟件影響統(tǒng)計(jì)的一點(diǎn)對策
由于公司項(xiàng)目需要增加推廣獎勵功能，網(wǎng)站用戶通過邀請地址發(fā)給QQ好友、論壇、個人網(wǎng)站之類，只要有通過邀請地址點(diǎn)擊進(jìn)來就算推廣成功（當(dāng)天同一個IP僅算一次），推廣人會獲得相應(yīng)的獎勵、積分等。2011-07-07
webuploader模態(tài)框ueditor顯示問題解決方法
這篇文章主要為大家詳細(xì)介紹了webuploader模態(tài)框ueditor顯示問題的解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
動畫效果對于豐富網(wǎng)站的交互體驗(yàn)起到了不可或缺的作用，他可以讓你的站點(diǎn)更酷，更吸引人2012-08-08
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)淘寶商品圖片局部放大，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03