首页 > 代码库 > 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 前端分页
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。