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

浏览数：18 / 时间：2015年06月09日

先来看看效果：

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

如何使用？

            $("#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*/