在做**和訂單管理的時候,常常會用到分頁功能,所以我封裝了乙個jquery的分頁外掛程式,該外掛程式主要實現上下翻頁,輸入數字跳轉等功能。
具體實現如下:
輸入引數需要當前頁碼pageno,總頁碼totalpage,**函式callback。
主要的實現有兩個函式,乙個是根據當前頁和總頁數生成相應的html的**,乙個是事件繫結及**函式的執行。
creathtml函式:
creathtml:functionbindevent函式:()//總頁數大於7,根據當前頁顯示省略號,否則顯示全部頁碼
if(total > 7)
else
}content += "...";
content += ""+total+"";
}else
else
}content += "...";
content += ""+total+"";
}else
else}}
}}
else
else}}
//當前頁小於總頁數,顯示向下翻頁按鈕
if(current
//輸入跳轉
content += " 到第 ";
content += "";
content += " 頁 ";
content += "go";
//更新html
me.element.html(content);
}
bindevent:function將函式封裝起來,完整如下:()else
if(num==">")
else
if(num=="go")
}else
//更新html
me.creathtml();
//呼叫**函式,返回當前頁碼
if(me.options.callback)
});}
;(functionhtml:($,window,document,undefined)
};function
paging(element,options));
this
.init();
}paging.prototype=,
creathtml:
function
()
if(total > 7)
else
}content += "...";
content += ""+total+"";
}else
else
}content += "...";
content += ""+total+"";
}else
else}}
}}
else
else}}
if(current
content += " 到第 ";
content += "";
content += " 頁 ";
content += "go";
me.element.html(content);
},bindevent:
function
()else
if(num==">")
else
if(num=="go")
}else
me.creathtml();
if(me.options.callback)
});}
};$.fn.paging=function
(options));
return
new paging($(this
),options);
}})(jquery,window,document);
<js引用:div
id="page"
>
div>
$('#page').paging(});這裡加了一些簡單的樣式,可以根據具體的ui設計來設計樣式。
超實用的jQuery分頁外掛程式
呼叫方法 tcdpagecode createpage pagecount 總頁數 current 當前頁 jquery.pager.js 應用案例 共條記錄,當前顯示第1頁 fxgoods.js middlediv height window.innerheight search height t...
jquery分頁外掛程式
css 分頁 pagelist pagelist a,pagelist span pagelist a hover,pagelist current pagelist pagelist hidden pagelist pagelist hidden hover pagelist input.jump...
jquery外掛程式 ajax分頁
突然發現,好久沒寫部落格了,越來越懶了.今天想說說ajax分頁的事,其實ajax分頁莫過於解決兩個問題,第一,總條數的獲取,第二,形成分頁 like this 總條數的獲取莫過於兩種方式,第一,載入時直接獲取,可通過變數設定,可通過url傳值,第二種通過ajax請求的資料中包含資料和總條數。資料的獲...