jQuery插件实例六:jQuery 前端分页

先来看看效果：

对于前端分页，关键是思路，和分页算法。本想多说两句，可又觉得没什么可说的，看代码吧：

如何使用？                                                                                                                                                                                                           

            $("#pging").zPagination({
                \'navEvent\':function(){
                    console.log(\'取数据Ajax\');
                }
            });

JS代码

//分页Pagination
; (function ($, window) {
    var defaults = {
        rowCount: 400, //总数据行数
        navPage: 10, //每次显示多少页导航
        pageSize: 10, //每页多少条数据
        currentPage: 20, //当前是第几页
        showRowsCount: true, //是否显示总数据数
        showGoto: false, //是否有跳转功能
        navUrl: \'\', //点击页后所跳转到的URL,用于非Ajax()方式:/Home/Index.aspx?pageIndex=
        ajaxUrl: \'\', //点击页后从哪个URL取数据,用于Ajax()方式:/Home/Index
        isAjaxData: true, //是从Ajax取数据还是非Ajax取数据
        divClass: \'z_paging\', //外围DIV的Class,其下有.z_paging a , .z_paging a:hover , .z_paging>.z_paging_current
        navEvent: \'\'//点击导航页后所要执行的事件function(){...},通常和isAjaxData==true联用。
    };
    $.fn.zPagination = function (options) {
        $this = $(this);
        var ops = $.extend({}, defaults, options);
        var _pageCount = 0;
        var _startNav = 0;
        var _endNav = 0;

        //初始化参数
        function initParameter() {
            _pageCount = (ops.rowCount % ops.pageSize == 0) ? ops.rowCount / ops.pageSize : parseInt(ops.rowCount / ops.pageSize) + 1;
            if (ops.currentPage <= parseInt(ops.navPage / 2)) {
                _startNav = 1;
            } else {
                _startNav = ops.currentPage - parseInt(ops.navPage / 2); //(30-(10/2)==25)
            }

            _endNav = _startNav + ops.navPage;
            if (_endNav > _pageCount) {
                _endNav = _pageCount;
                _startNav = _endNav - ops.navPage;
            }
            if (_startNav < 1) {
                _startNav = 1;
            }

            //生成DOM元素
            if (ops.isAjaxData == true) {
                generateAjaxDom();
            } else {
                generateDom();
            }
        };

        //网址方式加载数据 isAjaxData==false 时执行
        function generateDom() {
            $this.html(\'\').addClass(ops.divClass);
            $(\'<a href=\' + ops.navUrl + \'1></a>\').html(1).appendTo($this);
            _startNav++;
            if (_startNav != 2) {
                $(\'<span></span>\').html(\'...\').appendTo($this);
            }
            while (_startNav < _endNav) {
                $(\'<a href=\' + ops.navUrl + _startNav + \'></a>\').html(_startNav).appendTo($this);
                _startNav++;
            }
            _startNav--;

            if (_endNav < _pageCount) {
                $(\'<span></span>\').html(\'...\').appendTo($this);
            }
            if (_startNav < _endNav && _endNav <= _pageCount) {
                $(\'<a href=\' + ops.navUrl + _endNav + \'></a>\').html(_pageCount).appendTo($this);
            }
            findCurrentNum();
        }

        //通过Ajax方式加载数据 isAjaxData==true 时执行
        function generateAjaxDom() {
            $this.html(\'\').addClass(ops.divClass);
            $(\'<a href="javascript:void(0);"></a>\').html(1).appendTo($this);
            _startNav++;
            if (_startNav != 2) {
                $(\'<span></span>\').html(\'...\').appendTo($this);
            }
            while (_startNav < _endNav) {
                $(\'<a href="javascript:void(0);"></a>\').html(_startNav).appendTo($this);
                _startNav++;
            }
            _startNav--;

            if (_endNav < _pageCount) {
                $(\'<span></span>\').html(\'...\').appendTo($this);
            }
            if (_startNav < _endNav && _endNav <= _pageCount) {
                $(\'<a href="javascript:void(0);"></a>\').html(_pageCount).appendTo($this);
            }

            //给每个<a />添加事件
            function initAjaxData() {
                $this.find(\'a\').bind(\'click\', function () {
                    try {
                        ops.currentPage = parseInt($(this).html());
                        if (typeof (ops.navEvent) == \'function\') {
                            ops.navEvent();
                            initParameter(); //重新生成页数导航条,放在这里,放在这里,是为了避免因参数没传对,而出现看见导航页变了,而数据没变的情况
                        }
                    } catch (e) {

                    }
                });
            }
            initAjaxData();
            findCurrentNum();
        }

        //找出当前页
        function findCurrentNum() {
            $this.find(\'a\').each(function () {
                if (parseInt($(this).html()) == ops.currentPage) {
                    $(this).addClass(\'z_paging_current\');
                }
            });
            appendEle();
        }

        //附加元素 是否显示总数据数
        function appendEle() {
            if (typeof (ops.showRowsCount) == \'boolean\') {
                $(\'<span class="z_rows_count"></span>\').html(\'总数:\' + ops.rowCount).appendTo($this);
            }
        }

        initParameter();

        //获取当前是第几页 调用方式:this.currentPage
        this.currentPage = function () {
            return ops.currentPage();
        };

        return this;
    };
})(jQuery, window);

CSS

/*zPagination Begin*/
.z_paging
{
}
.z_paging a, .z_paging span
{
    float: left;
    display: inline-block;
    vertical-align: text-bottom;
    text-align: center;
    line-height: 34px;
    background-color: #fff;
}
.z_paging a
{
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
    padding: 0 12px;
    margin: 0 2px;
    text-decoration: none;
    color: #734ba9;
}
.z_paging a:hover
{
    background-color: #6699ff;
    color: #fff;
}
.z_paging > .z_paging_current
{
    background-color: #e5e5e5;
}
.z_paging > .z_rows_count
{
    border-radius: 3px;
    border: 1px solid #e5e5e5;
    padding: 0 12px;
    margin: 0 2px;
    text-decoration: none;
    color: #734ba9;
}
/*zPagination End*/