JQuery分页插件使用心得
2018-01-02 16:01
369 查看
在修改别人的后台代码的时候发现其使用的一款分页插件,于是看了其源代码学习了一下,并将使用的心得整理了一下。
- 插件的源代码如下:
以及配合使用的css文件代码如下
当你在项目中引入了以上文件后,我们就可以开始使用了!如何使用呢?注意看插件源码的最后几行:
这里我们举个例子大家一看就明白了:
设置好这些分页的基本参数后,显示的效果如下图
上面的代码大家不难看懂,这里简单介绍下回调函数。当我们点击首页、上下页或者具体页数时都会触发,并且返回当前页数,这点通过查看源码里的handles函数也可以看出。
将返回的页数参数这里为page,传入查询函数里(如果有查询条件,将查询条件一并传入)重新进行查询得到 对应数据。
基本的使用过程就是这样啦,只要熟悉分页的基本流程,使用起来还是很方便的。
- 插件的源代码如下:
(function($, window, document) { // 定义构造函数 function Paging(el, options) { this.el = el; this.options = { pageNo: options.initPageNo || 1, // 初始页码 totalPages: options.totalPages || 1, //总页数 totalCount: options.totalCount || '', // 条目总数 slideSpeed: options.slideSpeed || 0, // 缓动速度 jump: options.jump || false, // 支持跳转 callback: options.callback || function() {} // 回调函数 }; this.init(); } // 给实例对象添加公共属性和方法 Paging.prototype = { constructor: Paging, init: function() { this.createDom(); this.bindEvents(); }, createDom: function() { var that = this, ulDom = '', jumpDom = '', content = '', liWidth = 60, // li的宽度 totalPages = that.options.totalPages, // 总页数 wrapLength = 0; totalPages > 5 ? wrapLength = 5 * liWidth : wrapLength = totalPages * liWidth; for (var i = 1; i <= that.options.totalPages; i++) { i != 1 ? ulDom += '<li>' + i + '</li>' : ulDom += '<li class="sel-page">' + i + '</li>'; } that.options.jump ? jumpDom = '<input type="text" placeholder="1" class="jump-text" id="jumpText"><button type="button" class="jump-button" id="jumpBtn">跳转</button>' : jumpDom = ''; content = '<button type="button" id="firstPage" class="turnPage first-page">首页</button>' + '<button class="turnPage" id="prePage">上一页</button>' + '<div class="pageWrap" style="width:' + wrapLength + 'px">' + '<ul id="pageSelect" style="transition:all ' + that.options.slideSpeed + 'ms">' + ulDom + '</ul></div>' + '<button class="turnPage" id="nextPage">下一页</button>' + '<button type="button" id="lastPage" class="last-page">尾页</button>' + jumpDom + '<p class="total-pages">共 ' + that.options.totalPages + ' 页</p>' + '<p class="total-count">' + that.options.totalCount + '</p>'; that.el.html(content); }, bindEvents: function() { var that = this, pageSelect = $('#pageSelect'), // ul lis = pageSelect.children(), // li的集合 liWidth = lis[0].offsetWidth, // li的宽度 totalPages = that.options.totalPages, // 总页数 pageIndex = that.options.pageNo, // 当前选择的页码 distance = 0, // ul移动距离 prePage = $('#prePage'), nextPage = $('#nextPage'), firstPage = $('#firstPage'), lastPage = $('#lastPage'), jumpBtn = $('#jumpBtn'), jumpText = $('#jumpText'); prePage.on('click', function() { pageIndex--; if (pageIndex < 1) pageIndex = 1; handles(pageIndex); }) nextPage.on('click', function() { pageIndex++; if (pageIndex > lis.length) pageIndex = lis.length; handles(pageIndex); }) firstPage.on('click', function() { pageIndex = 1; handles(pageIndex); }) lastPage.on('click', function() { pageIndex = totalPages; handles(pageIndex); }) jumpBtn.on('click', function() { var jumpNum = parseInt(jumpText.val().replace(/\D/g, '')); if (jumpNum && jumpNum >= 1 && jumpNum <= totalPages) { pageIndex = jumpNum; handles(pageIndex); jumpText.val(jumpNum); } }) lis.on('click', function() { pageIndex = $(this).index() + 1; handles(pageIndex); }) function handles(pageIndex) { lis.removeClass('sel-page').eq(pageIndex - 1).addClass('sel-page'); if (totalPages <= 5) { that.options.callback(pageIndex); return false; } if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth; if (pageIndex == 2 || pageIndex == 1) distance = 0; if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth; pageSelect.css('transform', 'translateX(' + (-distance) + 'px)'); pageIndex == 1 ? firstPage.attr('disabled', true) : firstPage.attr('disabled', false); pageIndex == 1 ? prePage.attr('disabled', true) : prePage.attr('disabled', false); pageIndex == totalPages ? lastPage.attr('disabled', true) : lastPage.attr('disabled', false); pageIndex == totalPages ? nextPage.attr('disabled', true) : nextPage.attr('disabled', false); that.options.callback(pageIndex); } handles(that.options.pageNo); // 初始化页码位置 } } $.fn.paging = function(options) { return new Paging($(this), options); } })(jQuery, window, document);
以及配合使用的css文件代码如下
* { margin: 0; padding: 0; list-style: none; } .fl { float: left; } .box { text-align: center; overflow: hidden; margin: 20px 0 0 0; height: auto !important; } .box button { padding: 0 10px; margin: 0 10px; height: 40px; float: left; cursor: pointer; border: 1px solid #ebebeb; background-color: #ffffff; } .box .first-page, .box .last-page { margin: 0; } .box .pageWrap { height: 40px; float: left; overflow: hidden; } .box .pageWrap ul { width: 100000px; height: 40px; float: left; } .box .pageWrap ul li { width: 60px; height: 40px; border: 1px solid #ebebeb; line-height: 40px; box-sizing: border-box; cursor: pointer; float: left; } .box .pageWrap ul .sel-page { background-color: #E6E6FA; } .box .jump-text { width: 60px; height: 40px; box-sizing: border-box; text-align: center; margin: 0 5px; float: left; } .box .jump-button { margin: 0; float: left; } .box .total-pages, .box .total-count { margin-left: 10px; float: left; font-size: 14px; padding-top: 11px; }
当你在项目中引入了以上文件后,我们就可以开始使用了!如何使用呢?注意看插件源码的最后几行:
$.fn.paging = function(options) { return new Paging($(this), options); }
这里我们举个例子大家一看就明白了:
<div class="box">分页内容要显示的地方</div> <script> $(function(){ var option={ pageNo: 1, // 初始页码 totalPages: 2, //总页数 totalCount: 8, // 条目总数 slideSpeed: 600, // 缓动速度 jump:true, // 支持跳转 callback: function(page) { //根据当前页查数据 ...... } // 回调函数 } $(".box").paging(option) }) </script>
设置好这些分页的基本参数后,显示的效果如下图
上面的代码大家不难看懂,这里简单介绍下回调函数。当我们点击首页、上下页或者具体页数时都会触发,并且返回当前页数,这点通过查看源码里的handles函数也可以看出。
将返回的页数参数这里为page,传入查询函数里(如果有查询条件,将查询条件一并传入)重新进行查询得到 对应数据。
基本的使用过程就是这样啦,只要熟悉分页的基本流程,使用起来还是很方便的。
相关文章推荐
- Jquery ThickBox插件使用心得(不建议使用)
- jquery插件:jqgrid的入门使用心得
- ·jQuery弹出层插件Thickbox使用心得
- jQuery弹出插件thickbox使用心得
- 【转】Jquery弹出层插件Thickbox使用心得
- jQuery智能布局插件 Isotope 推荐及使用心得
- 关于jquery.AutoComplete插件的一些使用心得(编码问题,效率问题)
- 使用Jquery分页插件jquery.pagination.js 实现无刷新分页效果
- jQuery弹出层插件Thickbox使用心得
- jquery插件:jqgrid的入门使用心得
- (原创)jQuery Media Plugin-jQuery的网页媒体播放器插件的使用心得
- PHP、Smarty与jQuery Ajax 分页插件jquery.pager.js的使用
- jquery的翻页分页插件使用
- jquery.pagination.js分页插件的使用
- Jquery弹出层插件Thickbox使用心得
- jQuery 分页插件 jqPagination的使用
- jquery插件:jqgrid的入门使用心得
- jQuery 分页插件 jPages 使用
- Jquery ThickBox插件使用心得(不建议使用)
- 使用Jquery.pagination插件实现分页