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*/

巴特西

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

最新文章

热门文章