這篇文章主要介紹了如何使用amaze ui的何使分頁(yè)樣式???封裝一個(gè)通用的JS分頁(yè)控件,本文通過(guò)實(shí)例代碼給大家(′_｀)介紹的非常詳細，對大家的用a頁(yè)樣頁(yè)控學(xué)習或工作具有一定(ding)的參考借鑒價(jià)值，需要的分的朋友可以參考下

首先，肯定是??式封用??我們的妹子UI做樣式效果，畢竟開(kāi)( ?° ?? ?°)發(fā)妹子少，通用做的何使東西(xi)能和妹子沾點(diǎn)邊，就沾一點(diǎn)，用a頁(yè)樣頁(yè)控畢竟妹子比較好???看。分的

第一步

找到妹子UI的式封分頁(yè)HTML代碼，一共有2種，通用我喜歡第一種，何使比較有顏

<ul data-am-widget="pagination"
class="am-pagination am-pagination-default"
>

<li class='am-pag(′_｀)ination-first '>
<a href='#' class="">第一頁(yè)</a>
</li>

<li class='am-pagination-prev '>
<a href="#" class=''>上一頁(yè)</a>
</lˉ\_(ツ)_/ˉi>
<li class=''??>
<a href="#??" class=''>1</a>
</li>
<li class='am-active'>
<a href='#' class="am-active">2</a&ヽ(′▽?zhuān)?/gt;
</li>
<li class=''>
<a href='#' class=''>3</a>
</li>
<li class=''>
<a href="#" class="">4</a>
</li>
<li class="">
<a href='#' class="">5</a>
</li>

<li class="am-pagination-next ">
<a href="#" class=''>下一頁(yè)</a>
</li>

<li class='am-pagination-last '>
<a href="#" class=''>最末頁(yè)</a&g(╯°□°）╯︵ ┻━┻tヽ(′ー｀)ノ;
</li>
</ul>(′▽?zhuān)?;

代碼簡(jiǎn)單，外觀(guān)漂亮，分的自然是式封封裝的首選啦。

接下來(lái)，通用就是造輪子的時(shí)間了，首先講講思路：我們需要一個(gè)動(dòng)態(tài)的分頁(yè)，那么這個(gè)里面的 li 就必須是動(dòng)態(tài)生成的，所以需要用js去生成dom元素，其次，使用者需要一個(gè)回調函數，┐(′д｀)┌用來(lái)分頁(yè)之后去請求他的數據，加載數據，這是核心的2個(gè)思路，剩下的就是分頁(yè)常規的一些東西，比如分頁(yè)必ヽ(′▽?zhuān)?ノ須的參數：當前頁(yè)、每頁(yè)條數、總條數，以及這個(gè)樣式對應的一些事件的處理：首頁(yè)、尾頁(yè)、上一頁(yè)、下一頁(yè)(′ω｀)。

思路整理完畢，開(kāi)整。

1、初始化

functio??n fm_page(cnf) {
var fmpage = {
id:'page',
pageNo : 0,// 當前頁(yè)
pageSize : 10,// 每頁(yè)條數
pageCount : 100,// 總條數
showPageNum : 5,//ヽ(′?｀)ノ 分頁(yè)元素長(cháng)度
pageNum:0,// 總頁(yè)數
pageCmp:null,
start:0,
init : funct(′▽?zhuān)?)ion() {
var it = this;
if (cnf) {
$.each(cnf, function(k, v) {
it[k]=v;
});
}
thi??s.pageNum=Math.cei(╬?益?)l(this.pageCount/this.pag( ?ヮ?)eSize)-1;
}
}
fmpage.init();
return fmpage;
}

2、js動(dòng)態(tài)加載li

根據使用者??想顯?示的數量動(dòng)態(tài)加載li,start 為li的起始數字

renderPage:function(start) {
this.start = start || 0;
this.pageCmp=$("#"+this.id);
this.pageCmp.empty();
this.pageCmp.append('<li ><a onclick="{ 0}" class=''>第一頁(yè)</a></li>'.r???epla(°o°)ce('{ 0}',??this.id+'.toFirst()'));
this.pageCmp.append('<li ><a onclick="{ 0}" class=''>上一頁(yè)</a></li>'.replace('{ 0}',this.id+'.toPrev()'));
var endNum=this.pageCount/this.pageSize>(this.showPageNum+this.sta(′?ω?`)r???t)?(th(╬?益?)is.showPageNum+this(⊙_⊙).start):this.pageCount/this.pageSize;// 截止元素

for(var i=this.start;i<endNum;i++)
{
var chose = i == this.pageNo? this.choseClass?? : '';
var li='<li class={ 1} ><(′_｀)a onclick="{ 2}" class="">{ 0}</a></li>';
this.pageCmp.append(li.replace('{ 0}',i+1).repl┐(′д｀)┌ac??e('{ 1}',chose).replace('{ 2}',this.id+'.toPage({ 0})'.replace('{ 0}',i)) );
}

this.pageCmp.append('<li ><a onclick="{ 0}" class=''>下一頁(yè)</a></li>'.replace('{ 0}',this.id+'.toNext()'));
this.pageCmp.append('<li ><a onclick="{ 0}" cl??ass="">最(zui)末頁(yè)</a></li>'.replace('{ 0}',this.iヾ(＾-＾)ノd+'.toLast()'));
}

toNe( ???)xt:function(){
this.pageNo = this.pa(╬?益?)geNo==this.pageNum?this.pageNo:thi??s.pageNo+1;
if(this.pageNo&(╬?益?)gt;=this.start+this.showPageNum&&this.pageNo<(this.pageNum)){
this.start=t(?????)his.start+this.showPageNum;
this.renderPage(this.sta??rt);
}

if(this.pageNo<=(this.pageNum))
th??is.li??Cls();
},
toPrev:function(){
thヾ(′▽?zhuān)??is.pageNo = this.pageNo==0?0:(//ω//)this.pageNo-1;
if(this.pageNo<(this.start)){
this.start=this.start-this.showPageNum;
this.renderPage(this.start);
}
if(this.pageNo>=0)
this.liCls();
},
toFirst:function(){
this.pageNo=0;
if(this.pageNo<(this.start)){
this.start=0;
this.r(???)enderPage(this.start);
}
this.liCls();
},
toLast:function(){
this.pageN(′▽?zhuān)?o=this.pageNum;
if(this.pag??eNo>=this.start+this.showPageNum){
this.start=this.pageNum-this.showPageNum??+1;
this.renderPage(this.start);
}
this.liCls()??;(′?｀*)
},
toPage??:function(pageNo){
this.pageNo=pa(′ω｀*)geNo;
this.liCls();
},

4、跳轉后要將某頁(yè)選中，并調用回調函數

liCls : fun??ction() {
this.pageChange(this.pageNo);
this.pageCmp.find('li:eq(' + (this.pageNo - this.start + 2) + ')')
.siblings('li').removeClass(this.choseClass).end()
.addClass(this.choseClass);
},
pageChange:function(pageNo)??{

}

5、經(jīng)過(guò)測試，調整、優(yōu)化，沒(méi)有發(fā)現問(wèn)題，編寫(xiě)注釋?zhuān)@個(gè)分頁(yè)控件

使用(yong)注意：調用必須實(shí)例化，且接收參數名與ul的id一致

優(yōu)點(diǎn)：a、本身使用妹子ui，漂亮、代碼簡(jiǎn)潔

b、經(jīng)封裝后，調用簡(jiǎn)單，無(wú)暗病

c、還支持自定義樣式，只需要你在ul上綁定你自己想要的class，并配置選擇效果class即可

最后，附??上完整的控件代碼，百度網(wǎng)盤(pán)下載地址??：

鏈接：https://pan.baidu.com/s/1R6H6D7apOa6Aatn6kmABuw

提取碼: gv??7b

總結

到此這篇關(guān)于使用amaze ui的分頁(yè)樣式封裝一個(gè)通用的JS分頁(yè)控件的文章就介紹到這了,更多相關(guān)amaze ui分頁(yè)樣式封裝JS分頁(yè)控件內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文??章，希望大家以后多多支持腳本之家！

來(lái)源：腳本之家

鏈接：https://www.jb51.net/htm???l5/741791.html