javascript分頁代碼實(shí)例分享(js分頁)
更新時間:2013年12月13日 09:13:08 作者:
這篇文章主要介紹了javascript分頁實(shí)例,大家參考使用吧
調(diào)用:
復(fù)制代碼 代碼如下:
var pageChange = function (index) {
var html = pager("divid", index, 5, 1000, pageChange, { showGoTo: false, showFirst: false });
}
實(shí)現(xiàn):
復(fù)制代碼 代碼如下:
pager = function (divPager, pageIndex, pageSize, totalCount, pageChange, opt) {
var theOpt = {
barSize: 5, //分頁條顯示的頁碼數(shù)
barTemplate: "{bar} 共{totalPage}頁{totalCount}條 {goto}", //顯示模板
autoHide: true, //是否自動隱藏
showFirst: true, //在totalPage>barSize時是自動否顯示第一頁鏈接
showLast: true, //在totalPage>barSize時是自動否顯示最后一頁鏈接
showGoTo: true, //是否顯示GoTo
autoHideGoTo: true //如果太少是否自動隱藏GoTo
};
if (opt) {
if (opt.barSize)
theOpt.barSize = opt.barSize;
if (opt.barTemplate)
theOpt.barTemplate = opt.barTemplate;
if (opt.autoHide == false)
theOpt.autoHide = false;
if (opt.showFirst == false)
theOpt.showFirst = false;
if (opt.showLast = false)
theOpt.showLast = false;
if (opt.showGoTo == false)
theOpt.showGoTo = false;
if (opt.autoHideGoTo == false)
theOpt.autoHideGoTo = false;
}
var handles = window.myPagerChanges = (function (x) { return x; } (window.myPagerChanges || {}));
if (!myPagerChanges[divPager]) myPagerChanges[divPager] = pageChange;
var startPage = 0; //分頁條起始頁
var endPage = 0; //分頁條終止頁
var showFirst = true;
var showLast = true;
if (isNaN(pageIndex)) {
pageIndex = 1;
}
pageIndex = parseInt(pageIndex);
if (pageIndex <= 0)
pageIndex = 1;
if (pageIndex * pageSize > totalCount) {
pageIndex = Math.ceil(totalCount / pageSize);
}
if (totalCount == 0) { //如果沒數(shù)據(jù)
document.getElementById(divPager).innerHTML = "";
return "";
}
var totalPage = Math.ceil(totalCount / pageSize);
if (theOpt.autoHide && totalCount <= pageSize) { //自動隱藏
document.getElementById(divPager).innerHTML = "";
return "";
}
if (totalPage <= theOpt.barSize) {
startPage = 1;
endPage = this.totalPage;
theOpt.showLast = theOpt.showFirst = false;
}
else {
if (pageIndex <= Math.ceil(theOpt.barSize / 2)) { //最前幾頁時
startPage = 1;
endPage = theOpt.barSize;
theOpt.showFirst = false;
}
else if (pageIndex > (totalPage - theOpt.barSize / 2)) { //最后幾頁時
startPage = totalPage - theOpt.barSize + 1;
endPage = totalPage;
theOpt.showLast = false;
}
else { //中間的頁時
startPage = pageIndex - Math.ceil(theOpt.barSize / 2) + 1;
endPage = pageIndex + Math.floor(theOpt.barSize / 2);
}
if (totalPage <= (theOpt.barSize * 1.5)) {
theOpt.showLast = theOpt.showFirst = false;
}
}
function _getLink(index, txt) {
if (!txt) txt = index;
return "<a href='javascript:;' style='margin: 2px 5px;border: 1px solid #6d8cad;color: #0269BA;padding: 2px 5px;text-decoration: none;' onclick='myPagerChanges[\"" + divPager + "\"](" + index + ")'>" + txt + "</a>";
}
var barHtml = ""; //分頁條
barHtml += pageIndex == 1 ? "" : _getLink(pageIndex - 1, "上一頁");
if (theOpt.showFirst) {
barHtml += _getLink(1) + "<span>...</span>";
}
for (var index = startPage; index <= endPage; index++) {
if (index == pageIndex) {
barHtml += "<span style='color:red;font-weight:blod; '>" + index + "</span>";
}
else {
barHtml += _getLink(index);
}
}
if (theOpt.showLast) {
barHtml += "<span>...</span>" + _getLink(totalPage);
}
barHtml += pageIndex == totalPage ? "" : _getLink(pageIndex + 1, "下一頁");
var gotoHtml = ""; //goto框及按鈕
if (theOpt.showGoTo && theOpt.barTemplate.indexOf("{goto}") > 0) {
if ((theOpt.autoHideGoTo && totalPage > 15) || theOpt.autoHideGoTo == false) {
var txtid = divPager + "_goIndex";
var indexVal = "document.getElementById(\"" + txtid + "\").value";
gotoHtml += "<input type='text' onkeypress='if(event.keyCode==13){myPagerChanges[\"" + divPager + "\"](" + indexVal + ")}' id='" + txtid + "' value=" + pageIndex + " style='width:30px'>";
gotoHtml += " <input type='button' class='page_bg' value='go' onclick='myPagerChanges[\"" + divPager + "\"](" + indexVal + ")'>";
}
}
//替換模板
var pagerHtml = theOpt.barTemplate.replace("{bar}", barHtml)
.replace("{totalCount}", totalCount)
.replace("{pageIndex}", pageIndex)
.replace("{totalPage}", totalPage)
.replace("{goto}", gotoHtml);
document.getElementById(divPager).innerHTML = pagerHtml;
return pagerHtml;
};
您可能感興趣的文章:
- js前臺分頁顯示后端JAVA數(shù)據(jù)響應(yīng)
- 純js分頁代碼(簡潔實(shí)用)
- js寫的評論分頁(還不錯)
- js+css實(shí)現(xiàn)的簡單易用兼容好的分頁
- 純js寫的分頁表格數(shù)據(jù)為json串
- js對文章內(nèi)容進(jìn)行分頁示例代碼
- js分頁代碼分享
- jsp分頁顯示完整實(shí)例
- js分頁工具實(shí)例
- JS+CSS實(shí)現(xiàn)的拖動分頁效果實(shí)例
- JS實(shí)現(xiàn)當(dāng)前頁居中分頁效果的方法
- Jquery+Ajax+Json+存儲過程實(shí)現(xiàn)高效分頁
- js腳本分頁代碼分享(7種樣式)
相關(guān)文章
javascript 關(guān)于賦值、淺拷貝、深拷貝的個人理解
關(guān)于賦值、淺拷貝、深拷貝,以前也思考良久,很多時候都以為記住了,但是,我太難了。今天我特地寫下筆記,希望可以完全掌握這個東西,也希望可以幫助到任何想對學(xué)習(xí)這個東西的同學(xué)2019-11-11JavaScript實(shí)現(xiàn)獲取圖片文件真實(shí)格式的示例代碼
每種格式的圖片,都有自己特有的優(yōu)缺點(diǎn)以及數(shù)據(jù)結(jié)構(gòu),本篇博文的目的就是基于不同格式的圖像二進(jìn)制數(shù)據(jù),獲取到圖片的真實(shí)格式,感興趣的可以了解一下2023-02-02基于js實(shí)現(xiàn)逐步顯示文字輸出代碼實(shí)例
這篇文章主要介紹了基于js實(shí)現(xiàn)逐步顯示文字輸出代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04JavaScript實(shí)現(xiàn)水平進(jìn)度條拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)水平進(jìn)度條拖拽效果的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01通過滑動翻頁效果實(shí)現(xiàn)和移動端click事件問題
這篇文章主要介紹了滑動翻頁效果實(shí)現(xiàn)和移動端click事件問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-01