javascript分页代码实例分享(js分页)_Javascript教程-查字典教程网
javascript分页代码实例分享(js分页)
javascript分页代码实例分享(js分页)
发布时间:2016-12-30 来源:查字典编辑
摘要:调用:复制代码代码如下:varpageChange=function(index){varhtml=pager("divid",index,...

调用:

复制代码 代码如下:

var pageChange = function (index) {

var html = pager("divid", index, 5, 1000, pageChange, { showGoTo: false, showFirst: false });

}

实现:

复制代码 代码如下:

pager = function (divPager, pageIndex, pageSize, totalCount, pageChange, opt) {

var theOpt = {

barSize: 5, //分页条显示的页码数

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) { //如果没数据

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:;' 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>" + 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 + ">";

gotoHtml += "<input type='button' 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;

};

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类