首页 > 代码库 > jQuery插件实例六:jQuery 前端分页

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=http://www.mamicode.com/=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 =http://www.mamicode.com/= true) {                generateAjaxDom();            } else {                generateDom();            }        };        //网址方式加载数据 isAjaxData=http://www.mamicode.com/=false 时执行        function generateDom() {            $this.html(‘‘).addClass(ops.divClass);            $(‘<a href=http://www.mamicode.com/‘ + ops.navUrl + ‘1>‘).html(1).appendTo($this);            _startNav++;            if (_startNav != 2) {                $(‘<span></span>‘).html(‘...‘).appendTo($this);            }            while (_startNav < _endNav) {                $(‘<a href=http://www.mamicode.com/‘ + ops.navUrl + _startNav + ‘>‘).html(_startNav).appendTo($this);                _startNav++;            }            _startNav--;            if (_endNav < _pageCount) {                $(‘<span></span>‘).html(‘...‘).appendTo($this);            }            if (_startNav < _endNav && _endNav <= _pageCount) {                $(‘<a href=http://www.mamicode.com/‘ + ops.navUrl + _endNav + ‘>‘).html(_pageCount).appendTo($this);            }            findCurrentNum();        }        //通过Ajax方式加载数据 isAjaxData=http://www.mamicode.com/=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 前端分页