表格、矩形、正方形、类微信图文【瀑布流排版】列表jQuery分页插件

来源：互联网发布：在校大学生贷款软件编辑：程序博客网时间：2024/06/04 23:47

转载请注明出处：http://blog.csdn.net/baidu_33320352/article/details/70327781

前言：最近工作不忙，就写了几个不同类型列表的jQuery分页插件。至于我为什么要写这几个插件，只是因为在日常的编码过程中总是需要在页面上对内容进行分页展示，不进行封装的话代码的重复性很高，而我又是一个比较懒的程序猿，只要有总是重复使用的代码部分，我就忍不住要去对它进行封装。我虽然是一个主攻java后端开发的程序猿，但还是经常写一些前端常用的插件，我...

好了，我就不碎碎念了，下面对我编写的几个插件进行简单的介绍，至于想更进一步了解的话，你懂的，你可以自己研究一下我的代码，吃透后你想怎么改都行，要是你在这个过程中发现我的代码有什么bug的话，可以在下方留言通知我，大家互相学习互相进步嘛！

概述：表格、矩形、正方形、类微信图文【瀑布流排版】列表jQuery分页插件。

注意：需要引入jQuery

预览：

表格列表类型
正方形图文列表类型
矩形图文列表类型
类微信图文列表类型【瀑布流排版】

代码（以表格分页插件为例）：

css样式

/*按钮样式开始*/.yzz-button {height: 32px;padding: 0 12px;background-color: #009688;color: #fff;text-align: center;font-size: 14px;border: none;border-radius: 2px;cursor: pointer;opacity: 0.9;margin-right: 10px;}.yzz-button:hover {background-color: #17AFA1;}/*按钮样式结束*//*分页器样式开始*/.yzz-paging-plugin-pager {margin-top: 15px 0;vertical-align: middle;clear: both;}.yzz-paging-plugin-pager,.yzz-paging-plugin-pager select {font-size: 14px;}.yzz-paging-plugin-pager .yzz-page-total-record {float: left;margin-right: 10px;position: relative;top: 2px;}.yzz-paging-plugin-pager .yzz-page-size {float: left;position: relative;top: 0px;}.yzz-paging-plugin-pager .yzz-page-turn {float: right;}.yzz-paging-plugin-table a {margin-right: 5px;text-decoration: none;}.yzz-paging-plugin-pager a {color: blue;}.yzz-paging-plugin-pager .yzz-page-turn a {float: left;margin-right: 10px;text-decoration: none;position: relative;top: 2px;}.yzz-paging-plugin-pager .yzz-page-turn a:hover,.yzz-paging-plugin-table a:hover {color: #070756;}.yzz-paging-plugin-pager .yzz-page-turn div {float: left;margin-right: 10px;}.yzz-paging-plugin-pager .yzz-page-turn div:last-child {position: relative;top: 2px;}/*分页器样式结束*/

/*表格样式开始*/.yzz-paging-plugin-table a {color: blue;}.yzz-paging-plugin-table {width: 100%;margin: 10px 0;background-color: #fff;border-collapse: collapse;}.yzz-paging-plugin-table th {background-color: #F2F2F2;}.yzz-paging-plugin-table td,.yzz-paging-plugin-table th {padding: 9px 15px;border: 1px solid #e2e2e2;font-size: 14px;vertical-align: middle;}.yzz-paging-plugin-table tr:hover {background-color: #FBFBFB;}/*表格样式结束*/

HTML页面

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>表格列表插件</title><link rel="stylesheet" href="../css/yzz-main.css" /></head><body><div class="pager" style="width: 1000px; margin: auto;"></div><script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script><script type="text/javascript" src="../js/jquery.yzz.table.pager-1.0.js"></script><script type="text/javascript">$(function() {var datas = [['<input type="checkbox" class="yzz-checkbox" value="0">', '列一', '列二', '<a href="javascript:void(0);" class="yzz-edit">编辑</a><a href="javascript:void(0);" class="yzz-delete">删除</a>'],['<input type="checkbox" class="yzz-checkbox" value="1">', '列一', '列二', '<a href="javascript:void(0);" class="yzz-edit">编辑</a><a href="javascript:void(0);" class="yzz-delete">删除</a>'],['<input type="checkbox" class="yzz-checkbox" value="2">', '列一', '列二', '<a href="javascript:void(0);" class="yzz-edit">编辑</a><a href="javascript:void(0);" class="yzz-delete">删除</a>']];var currentPage = 1;turnPage(datas, currentPage);})function turnPage(datas, currentPage) {$(".pager").yzzTbalePager({datas: datas,page: {'currentPage': currentPage,'pageSize': 10,'totalPage': 3,'totalRecord': 23},cellWidths: ['5%', '30%', '30%', '10%'],firstPage: function() {alert('firstPage');},previousPage: function() {alert('previousPage');},nextPage: function() {alert('nextPage');},endPage: function() {alert('endPage');},setPageSize: function(pageSize) {alert('setPageSize:' + pageSize);},setCurrentPage: function(currentPage) {alert('setCurrentPage:' + currentPage);},editRecord: function(id) {alert('editRecord:' + id);},deleteRecord: function(id) {alert('deleteRecord:' + id);},insertRecord: function() {alert('insertRecord');},deleteBatch: function(values) {alert('deleteBatch:' + values);}});}</script></body></html>

jQuery分页插件

/** * 分页器 * @author 杨志钊 * @date 2017-03-23 * @param {Object} options */$.fn.yzzTbalePager = function(options) {var defaults = {thead: ['<input type="checkbox" class="yzz-checkbox">', '列一', '列二', '操作'], //要使全选事件有效复选框checkbox的类名要求一致datas: [ //启动编辑点击事件必须带class：yzz-edit、启动删除点击事件必须带class：yzz-delete['<input type="checkbox" class="yzz-checkbox" value="0dfg">', '列一', '列二', '<a href="javascript:void(0);" class="yzz-edit">编辑</a><a href="javascript:void(0);" class="yzz-delete">删除</a>'],['<input type="checkbox" class="yzz-checkbox" value="1ecfe">', '列一', '列二', '<a href="javascript:void(0);" class="yzz-edit">编辑</a><a href="javascript:void(0);" class="yzz-delete">删除</a>'],['<input type="checkbox" class="yzz-checkbox" value="2ererg">', '列一', '列二', '<a href="javascript:void(0);" class="yzz-edit">编辑</a><a href="javascript:void(0);" class="yzz-delete">删除</a>']],page: {'currentPage': 1,'pageSize': 10,'totalPage': 4,'totalRecord': 35},cellHeight: '20px',cellWidths: ['5%', '30%', '30%', '5%'],tableAlign: "center",cellTextAlign: "center",addInsertButton: true,addDeleteButton: true,pageAmount: 10, //页大小间隔量，一定要和第一次的pageSize值一样$this: $(this),noDatasImgTip: 'http://ww2.sinaimg.cn/mw690/0060tXcFgw1f06d5ziejaj30o016otfp.jpg',showPager: true,firstPage: function() {alert('firstPage');},previousPage: function() {alert('previousPage');},nextPage: function() {alert('nextPage');},endPage: function() {alert('endPage');},setPageSize: function(pageSize) {alert('setPageSize:' + pageSize);},setCurrentPage: function(currentPage) {alert('setCurrentPage:' + currentPage);},editRecord: function(id) {alert('editRecord:' + id);},deleteRecord: function(id) {alert('deleteRecord:' + id);},insertRecord: function() {alert('insertRecord');},deleteBatch: function(values) {alert('deleteBatch:' + values);}};//将一个空对象做为第一个参数var settings = $.extend({}, defaults, options);// 在每个调用该插件的元素中执行以下代码return $(this).each(function() {settings.$this.empty(); //先清空原来的内容settings.$this.css('padding', '10px');if(settings.datas.length > 0) {//列表头列数与内容列数不对等if(settings.thead.length != settings.datas[0].length) {alert('列表头列数与内容列数不对等')return;} else if(settings.thead.length != settings.cellWidths.length) {alert('列表头列数与单元格宽度列数不对等')return;}//是否增加添加按钮if(settings.addInsertButton) {var insertButton = '<button class="yzz-button yzz-insert-button">添加</button>';settings.$this.append(insertButton);settings.$this.find('.yzz-insert-button').click(function() {settings.insertRecord();});}//是否添加批量删除按钮if(settings.addDeleteButton) {var deleteButton = '<button class="yzz-button yzz-delete-button">删除</button>';settings.$this.append(deleteButton);settings.$this.find('.yzz-delete-button').click(function() {var $checkbox = settings.$this.find('table thead input[type=checkbox]').eq(0);var values = '';settings.$this.find('.' + $checkbox.attr('class')).each(function(i) {if($(this).prop('checked') && i != 0) {values += $(this).val() + ',';}});if(values.length > 0) {values = values.substring(0, values.length - 1);settings.deleteBatch(values);} else {alert('请先选择操作项');}});}}//组装列表数据var tableHtml = '<table align="' + settings.tableAlign + '" class="yzz-paging-plugin-table"><thead><tr>';;for(var i in settings.thead) {tableHtml += '<th width="' + settings.cellWidths[i] + '" height="' + settings.cellHeight + '">' + settings.thead[i] + '</th>';}tableHtml += '</tr></thead><tbody>';if(settings.datas.length <= 0) {settings.showPager = false;settings.$this.after('<div  style="width:' + (settings.$this.width() - 20) + 'px;" ><img style="margin-left:12px;"  width="100%" src="' + settings.noDatasImgTip + '"  /></div>');} else {for(var i in settings.datas) {tableHtml += '<tr>';for(var j in settings.datas[i]) {tableHtml += '<td width="' + settings.cellWidths[j] + '" height="' + settings.cellHeight + '">' + settings.datas[i][j] + '</td>';}tableHtml += '</tr>';}}tableHtml += '</tbody></table>';settings.$this.append(tableHtml);if(settings.datas.length > 0) {//判断在添加批量删除按钮后是否有添加全选复选框if(settings.addDeleteButton) {if(settings.$this.find('table thead input[type=checkbox]').eq(0).length <= 0) {alert('请先设置全选复选框');return;}}//单元格对齐格式settings.$this.find('table th').css('text-align', settings.cellTextAlign);settings.$this.find('table td').css('text-align', settings.cellTextAlign);if(settings.showPager) {//添加分页器var pagingPlugin = '<div class="yzz-paging-plugin-pager"><div class="yzz-page-total-record"><span>合计：</span><span>10</span><span>条</span></div><div class="yzz-page-size"><span>每页显示条数：</span><select><option value="10" selected="selected">10</option><option value="20">20</option></select></div><div class="yzz-page-turn"><a href="javascript:void(0);" class="firstPage">首页</a><a href="javascript:void(0);" class="previousPage">上一页</a><a href="javascript:void(0);" class="nextPage">下一页</a><a href="javascript:void(0);" class="endPage">尾页</a><div class="yzz-goto-page-div"><span>到第</span><select><option value="1" selected="selected">1</option><option value="2">2</option></select><span>页</span></div><div><span>第</span><span>1</span><span>/</span><span>2</span><span>页</span></div></div></div>';settings.$this.find('table').after(pagingPlugin);//设置页面列表相关分页数据settings.$this.find('.yzz-page-total-record span').eq(1).html(settings.page['totalRecord']);var options = '';var size = null;for(var i = 1; i <= Math.ceil(settings.page['totalRecord'] / settings.pageAmount); i++) {size = i * settings.pageAmount;if(size == settings.page['pageSize']) {options += '<option value="' + size + '" selected="selected">' + size + '</option>';} else {options += '<option value="' + size + '">' + size + '</option>';}}settings.$this.find('.yzz-page-size select').html(options);options = '';for(var i = 1; i <= settings.page['totalPage']; i++) {if(i == settings.page['currentPage']) {options += '<option value="' + i + '" selected="selected">' + i + '</option>';} else {options += '<option value="' + i + '">' + i + '</option>';}}settings.$this.find('.yzz-page-turn .yzz-goto-page-div select').html(options);settings.$this.find('.yzz-page-turn div').eq(1).find('span').eq(1).html(settings.page['currentPage']);settings.$this.find('.yzz-page-turn div').eq(1).find('span').eq(3).html(settings.page['totalPage']);//设置事件//设置全选事件var $checkbox = settings.$this.find('table thead input[type=checkbox]').eq(0);if($checkbox.length > 0) {$checkbox.eq(0).click(function() {settings.$this.find('.' + $(this).attr("class")).prop('checked', $(this).prop('checked'));});}//设置每页显示条数事件settings.$this.find('.yzz-page-size select').change(function() {settings.setPageSize(settings.$this.find('.yzz-page-size select').val());});//设置页面跳转事件settings.$this.find('.yzz-goto-page-div select').change(function() {settings.setCurrentPage(settings.$this.find('.yzz-goto-page-div select').val());});if(settings.page['currentPage'] == 1) {settings.$this.find('.yzz-page-turn .firstPage').css({'cursor': 'not-allowed','color': '#444'});settings.$this.find('.yzz-page-turn .previousPage').css({'cursor': 'not-allowed','color': '#444'});//绑定下一页事件settings.$this.find('.yzz-page-turn .nextPage').bind('click', function() {settings.nextPage();});//绑定尾页事件settings.$this.find('.yzz-page-turn .endPage').bind('click', function() {settings.endPage();});} else if(settings.page['currentPage'] > 1 && settings.page['currentPage'] < settings.page['totalPage']) {//绑定首页事件settings.$this.find('.yzz-page-turn .firstPage').bind('click', function() {settings.firstPage();});//绑定上一页事件settings.$this.find('.yzz-page-turn .previousPage').bind('click', function() {settings.previousPage();});//绑定下一页事件settings.$this.find('.yzz-page-turn .nextPage').bind('click', function() {settings.nextPage();});//绑定尾页事件settings.$this.find('.yzz-page-turn .endPage').bind('click', function() {settings.endPage();});} else if(settings.page['currentPage'] == settings.page['totalPage']) {//绑定首页事件settings.$this.find('.yzz-page-turn .firstPage').bind('click', function() {settings.firstPage();});//绑定上一页事件settings.$this.find('.yzz-page-turn .previousPage').bind('click', function() {settings.previousPage();});settings.$this.find('.yzz-page-turn .nextPage').css({'cursor': 'not-allowed','color': '#444'});settings.$this.find('.yzz-page-turn .endPage').css({'cursor': 'not-allowed','color': '#444'});}//设置编辑事件if(settings.$this.find('.yzz-paging-plugin-table .yzz-edit').length > 0) {var $checkbox = settings.$this.find('table thead input[type=checkbox]').eq(0);if($checkbox.length <= 0) {alert('请先设置全选复选框');return;}settings.$this.find('.yzz-paging-plugin-table .yzz-edit').each(function(index) {$(this).click(function() {settings.editRecord(settings.$this.find('table tr').find('.' + $checkbox.attr('class')).eq(index + 1).val());});});}//设置删除事件if(settings.$this.find('.yzz-paging-plugin-table .yzz-delete').length > 0) {var $checkbox = settings.$this.find('table thead input[type=checkbox]').eq(0);if($checkbox.length <= 0) {alert('请先设置全选复选框');return;}settings.$this.find('.yzz-paging-plugin-table .yzz-delete').each(function(index) {$(this).click(function() {settings.deleteRecord(settings.$this.find('table tr').find('.' + $checkbox.attr('class')).eq(index + 1).val());});});}}}});}

码云下载地址：http://git.oschina.net/young520/yzzPager

0 0