简明现代魔法 -> JavaScript -> JavaScript 常用的分页方法

JavaScript 常用的分页方法

2010-01-06

这个脚本是同事用来做前端网站时,列表分页用的。

<script language="javascript">
function Page() { }
//pageIndex 页面index
//pageSize  每页显示的条数
//totalCount 记录总数
//pageContainer 确切的应是pageBar 的container ;

Page.prototype.initPage = function(pageIndex, pageSize, _totalCount, pageContainer) {
	this.pageContainer = pageContainer;
	//取前面的pageIndex
    this.pageIndex = pageIndex == "" ? 1 : pageIndex; 
    var pagepindex, totalpindex, template;
    var queryString = __GetQueryString__(window.location.href);
    var regQString = new RegExp("pindex=\\d+$", "g");
    var newQString = "";

    regQString.test(queryString) == false ? newQString = String.format("{0}&pindex=[pindex]", queryString) : 
    	newQString = queryString.replace(regQString, "pindex=[pindex]"); ;

    var templage = String.format('<a href="?{0}">[Number]</a>', newQString);
    pagepindex = _totalCount % pageSize == 0 ? _totalCount / pageSize : Math.floor(_totalCount / pageSize) + 1;

    totalpindex = _totalCount;

    var checkTemp = '<span class="current">[page]</span>';
	//返回首页
    var pageHtml = templage.replace("[pindex]", 1)
                           .replace("[Number]", "共" + totalpindex + "条信息");

    if (this.pageIndex > 1) {
        pageHtml += templage.replace("[pindex]", this.pageIndex - 1)
                            .replace("[Number]", "上一页");
    }

    if (pagepindex <= 10) 
	{	//总页数小于10页时
        for (var i = 1; i <= pagepindex; i++) 
		{
			pageHtml += (i == this.pageIndex) ? checkTemp.replace("[page]", i) : templage.replace("[pindex]", i).replace("[Number]", i);
        }
    }

    else 
	{	//如果当前 页小于6时 不影响效果
        if (this.pageIndex <= 6) 
		{
            for (var i = 1; i <= 10; i++) 
			{
                pageHtml += (i == this.pageIndex) ? checkTemp.replace("[page]", i) : templage.replace("[pindex]", i).replace("[Number]", i);
            }
        }
        else 
		{	//如果当前页+4页没超过最大页数时
            if (this.pageIndex + 4 <= pagepindex) 
			{
                for (var i = this.pageIndex - 5; i <= this.pageIndex + 4; i++) {
                    pageHtml += (i == this.pageIndex) ? checkTemp.replace("[page]", i) : templage.replace("[pindex]", i).replace("[Number]", i);
                }
            }
            else 
			{	//如果当前页+4页超过最大页数,则从后往前取页数
                for (var i = pagepindex - 10; i <= pagepindex; i++) 
				{
                    pageHtml += (i == this.pageIndex) ? checkTemp.replace("[page]", i) : templage.replace("[pindex]", i).replace("[Number]", i);
                }
            }
        }
    }

    if (this.pageIndex != pagepindex) {
        pageHtml += templage.replace("[pindex]", this.pageIndex + 1)
                            .replace("[Number]", "下一页");
    }
    this.pageContainer.innerHTML = pageHtml;
}  
</script> 

如我们需要在页面的

<div id="pageBar" class="pages">
</div>  

里展示我们的分页工具栏,应这样调用:

<script type="text/javascript">
window.addEvent("domready", function() { //我这里用的是MOOTOOLS的脚本框架,如不用的话,去掉
	var page = new Page();
	var pindex = __ParseQueryString__(__GetQueryString__(window.location.href), "pindex");
	page.initPage(pindex, 5, totalCount, $('pageBar'));
});


下面补充下,这个类里用到的一个函数,javascrip 取QueryString:

function __GetQueryString__(url) {
	var pos = url.indexOf('?');
	if( pos > 0)
		return url.substring(pos+1);
	else
		return "";
}  

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们