[原创作品] javascript 实现的web分页器原理

　　很久没有写博客了，因为最近忙于一些杂七杂八的事情。不过，互联网的价值在于信息共享，因为共享，所以互联网才能飞快发展。博主建了一个技术共享qq群：164858883，因为目前人数还比较少，活跃度还不是很高，希望有和我一样想法的，有志于技术共享的技术宅，富有逗比精神的程序猿能一起加入，一起探讨和分享，一起创造更大的进步。当然，妹纸程序猿更受欢迎。^_^

　　好了，废话不多说了。今天要讲的分页器是web网页的分页器，就是下面这种效果，相信大家都用的多了。

　　　　　　

　　现在要做的就是如何用javascript实现这个分页器。

　　实现原理：在html中列表实现这个效果。设置ul,在ul中动态添加li，给li添加属性pagenum，这个属性值等于此刻li代表的页号。在每次用户点击页号后，刷新数据，重新生成一个分页器。原理就是这样，直接上代码。

　　

/**
 * Created by Steven on 2015/04/11/
 *
 */

function pager(
    /*int*/ index,
    /*int*/ size,
    /*String*/ ulClassName
    ) {

    $('.' + ulClassName).empty();
    var createLi = function (/*String*/content,
                             /*int*/ pageNum,
                             /*String*/ className) {
        var li = $('<li></li>');
        li.html(content);
        li.addClass(className);
        if (pageNum > 0) {      //Only add 'pagenum' attribute to the clickable li tag
            li.attr('pagenum', pageNum);
        }
        $('.' + ulClassName).append(li);

    };


    if (index < 1) {
        return;
    } else if (index == 1) {
        createLi('首页', 0, 'pager-first-li-disable');
        createLi('上一页', 0, 'pager-previous-li-disable');
    } else {
        createLi('首页', 1, 'pager-first-li');
        createLi('上一页', index - 1, 'pager-previous-li');
    }
    if (size <= 8) {
        for (var i = 1; i <= size; i++) {
            if (i != index) {
                createLi(i, i, 'pager-normal-li');
            } else {
                createLi(i, 0, 'pager-index-li');
            }
        }
    } else {
        if (index - 3 <= 1) {//while index is in first the three items
            for (var i = 1; i <= index + 5; i++) {
                if (i != index) {
                    createLi(i, i, 'pager-normal-li');
                } else {
                    createLi(i, 0, 'pager-index-li');
                }
            }
            createLi('···', 0, 'pager-space-li');
            createLi(size, size, 'pager-normal-li');
        } else if (index + 5 >= size) {//while index is in the last five items
            createLi('···', 0, 'pager-space-li');
            for (var i = index - 5; i <= size; i++) {
                if (i != index) {
                    createLi(i, i, 'pager-normal-li');
                } else {
                    createLi(i, 0, 'pager-index-li');
                }
            }

        } else {
            createLi('···', 0, 'pager-space-li');
            for (var i = index - 3; i <= index + 5; i++) {
                if (i != index) {
                    createLi(i, i, 'pager-normal-li');
                } else {
                    createLi(i, 0, 'pager-index-li');
                }
            }
            createLi('···', 0, 'pager-space-li');
            createLi(size, size, 'pager-normal-li');
        }
    }

    if (index == size) {
        createLi('下一页', 0, 'pager-next-li-disable');
        createLi('尾页', 0, 'pager-last-li-disable');
    } else if ((index < size)) {
        createLi('下一页', index + 1, 'pager-next-li');
        createLi('尾页', size, 'pager-last-li');
    }
}

　　这里我需要声明一下，之前我还写过一个分页器，不过，把请求的url的参数也写了进去。其实这样是完全没必要，也是不好的，这样就增加了分页器的复杂性，并且不好操作。而直接这样写，在哪使用起来都很方便，因为确定url，url的参数还要考虑进去。而我直接加入li属性，可以通过jQuery很方便的找到所需的页号。也很方便的进行其他处理。在生成li的函数createLi也是经过优化才这样写。这样一个函数可以生成所有所需的li元素。用起来是相当方便的，同时有效缩短了代码长度，删去了重复代码。剩下的工作便是在css文件实现所需要的效果样式了，由于css简单，就不上代码了。有问题可以在群里问我，也可以发邮件给我zhuttymore@126.com.

 

　　我这里再补充一下，以为分页器里边的li是动态添加的，获取点击事件时，不能用$('.pager li').click();来获取，下面提供一下方法：

 $(document).on('click',".page-box li",function(){
　　　　if(this.hasAttribute('pagenum')){
    　　　　 alert($(this).attr('pagenum'));
　　　　}
 });

 

　　这样才能正常获取点击事件，并且获取pagenum页号属性。

 　  修改了一个bug, 就是当前页等于最后一页时，createLi()第二个参数应该为0. 当初偷懒，写好最后一句时，直接copy上去，忘了改参数。现在是完整的可以使用了。

 

　　特别声明：原创作品，转载请注明出处http://zhutty.cnblogs.com。