jQuery分页插件

xiaoxiao2021-02-27  253

开发背景

最近接了一个小型电商网站,各大商品分类都需要用到分页的技巧,虽说我只是个后台汪,但是不想搞前端的后台不是一个好开发。参考了网上的某个简单的分页插件,重新封装了下,支持ajax请求,data参数传递,分页请求回调,真的很好用呢~

最终目的

既然是开发插件,那么使用一定要简单粗暴,类似easyui datagrid这样:

$('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'} ]] });

所以我大概构思了下,我的page插件应该是这样的:

$(".test").page({ 'url': '/data.json', 'maxShowItem': 7, 'data': { 'limit': 6, 'attr': 'attr' }, 'currentClass': 'currentPage', 'activeClass': 'active', 'disabledClass': 'disabled', 'callback': function(currentPage, pageCount, obj){ // 处理分页内容 console.log(currentPage, pageCount, obj); } });

url是分页查询的请求地址,maxShowItem则是最多显示多少分页按钮,data为每次ajax请求的参数,callback即是请求成功的回调,形参为当前页码currentPage,总页数pageCount,和当前页内容(总共结果数count,单页数据集result)。

效果图示

模仿着网易云音乐做的,然后有几个关键点,我都用红线标记出来了,大概说下各个标记和重要单位的意思:

left/right,即左右分页省略临界点;unit,即是currentPage两边各分布着几个分页按钮(不含首尾页);

这就是一个分页模型,当然实际开发中存在着许多条件因素,需要逐步来看。

即刻动手

这里推荐个jQuery插件编写教程的地址:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

首先定义Page插件的构造函数:

// 定义Page的构造函数 var Page = function(ele, opt){ this.$ele = ele; var defaults = { // 分页ajax地址 'url': '', // 最多展示分页按钮数 'maxShowItem': 7, // ajax请求默认参数 'data': { 'start': 0, 'limit': 10 }, // 当前页码class名称 'currentClass': '', // 激活的页码class名称 'activeClass': '', // 失效的页码class名称 'disabledClass': '', // 省略class名称 'ellipsis': '', // 请求回调,当前页码,总页码数,当前页码内容(当页结果result,数据总数count) 'callback': null }; this.opt = $.extend({}, defaults, opt); };

然后拓展Page的方法:

// 定义Page的方法 Page.prototype = { 'ajax': function(currentPage){ var data = this.opt.data; var page = this; data.start = (currentPage - 1) * data.limit; $.ajax({ 'url': this.opt.url, 'type': 'get', 'dataType': 'json', 'data': data, 'success': function(obj){ var pageCount = Math.ceil(obj.count / data.limit); page.resetPageItem(currentPage, pageCount); page.opt.callback(currentPage, pageCount, obj); }, 'error': function(XMLHttpRequest, textStatus, errorThrown){ console.log(XMLHttpRequest); console.log(textStatus); console.log(errorThrown); } }); }, // 重置分页item(第一次,和每次item点击都会触发) 'resetPageItem': function(currentPage, pageCount) { var page = this; var pageItem = this.getPageItem(currentPage, pageCount); this.$ele.html(pageItem); // 为每个item绑定点击事件 this.$ele.children('a[class=\'' + this.opt.activeClass + '\']').on('click',function(){ var $this = $(this); var currentPage = parseInt($this.attr('page-data')); page.ajax(currentPage); }); }, // 根据总页数和当前页数,得到分页item的html内容 'getPageItem': function(currentPage, pageCount){ var prePage = currentPage - 1; var nextPage = currentPage + 1; var prePageClass = this.opt.activeClass; var nextPageClass = this.opt.activeClass; if (prePage <= 0) { prePageClass = this.opt.disabledClass; } if (nextPage > pageCount) { nextPageClass = this.opt.disabledClass; } var appendStr = ''; // appendStr += '<a href=\'#\' class=\'' + prePageClass + '\' page-data=\'1\'' + '>首页</a>'; appendStr += '<a href=\'#\' class=\'' + prePageClass + '\' page-data=\''+ prePage +'\'>< 上一页</a>'; var unit = (this.opt.maxShowItem - 3) / 2; // 左边临界 var left = currentPage - unit; // 右边临界 var right = currentPage + unit; if(left <= 1){ right = this.opt.maxShowItem - 1; } if(right >= pageCount){ left = pageCount - (this.opt.maxShowItem - 2); } var leftEllipsis = false; var rightEllipsis = false; for (var i = 1; i <= pageCount; i++) { var itemPageClass = this.opt.activeClass; // 左侧省略号 if(i > 1 && i < left){ if(!leftEllipsis){ itemPageClass = this.opt.ellipsis; appendStr+='<span class=\'' + itemPageClass + '\'>...</span>'; leftEllipsis = true; } continue; } // 右侧省略号 if(i < pageCount && i > right){ if(!rightEllipsis){ itemPageClass = this.opt.ellipsis; appendStr+='<span class=\'' + itemPageClass + '\'>...</span>'; rightEllipsis = true; } continue; } if(i == currentPage){ itemPageClass = this.opt.currentClass; } appendStr+='<a href=\'#\' class=\'' + itemPageClass + '\' page-data=\'' + i + '\'>' + i + '</a>'; } appendStr += '<a href=\'#\' class=\'' + nextPageClass + '\' page-data=\'' + nextPage + '\'>下一页 ></a>'; // appendStr += '<a href=\'#\' class=\'' + nextPageClass + '\' page-data=\'' + pageCount + '\'>尾页</a>'; return appendStr; } };

这里要讲述下,我拓展了Page的三个方法,分别是

ajax:点击一个active的分页按钮发起一个ajax请求,请求成功回调中初始化分页按钮items,同时调用Page构造方法参数中的callback;resetPageItem:通过当前页currentPage和总页数pageCount,获取分页按钮items的html内容,重置分页按钮items,同时对active的item绑定好click的ajax事件;getPageItem:获取分页按钮items的html内容,其实这个也可以写到resetPageItem中,只不过个人觉得生成html的逻辑有点复杂,可以和items的click绑定分开;

最后就是拓展jQuery的方法,使用Page对象:

// 在插件中使用Page对象 $.fn.page = function(opt){ var page = new Page(this, opt); // 初次加载 page.ajax(1); };

加上命名空间,防止变量污染:

;(function(){ // 插件代码 })(jQuery);

这样我们就编写完了整个分页控件,即可像最终目的中的那样,使用一个div的简单配置就能够一键实现ajax的分页功能,第一次自己编写呢,成就感爆棚啊~~

开源地址

https://github.com/JessicaJayPaul/page

转载请注明原文地址: https://www.6miu.com/read-9215.html

最新回复(0)