1)引入对应JS源码 jquery.simplePagination.js
/** * simplePagination.js v1.6 * A simple jQuery pagination plugin. * http://flaviusmatis.github.com/simplePagination.js/ * * Copyright 2012, Flavius Matis * Released under the MIT license. * http://flaviusmatis.github.com/license.html */ (function($){ var methods = { init: function(options) { var o = $.extend({ items: 1, itemsOnPage: 1, pages: 0, displayedPages: 5, edges: 2, currentPage: 0, hrefTextPrefix: '#page-', hrefTextSuffix: '', prevText: 'Prev', nextText: 'Next', ellipseText: '…', cssStyle: 'light-theme', listStyle: '', labelMap: [], selectOnClick: true, nextAtFront: false, invertPageOrder: false, useStartEdge : true, useEndEdge : true, onPageClick: function(pageNumber, event) { // Callback triggered when a page is clicked // Page number is given as an optional parameter }, onInit: function() { // Callback triggered immediately after initialization } }, options || {}); var self = this; o.pages = o.pages ? o.pages : Math.ceil(o.items / o.itemsOnPage) ? Math.ceil(o.items / o.itemsOnPage) : 1; if (o.currentPage) o.currentPage = o.currentPage - 1; else o.currentPage = !o.invertPageOrder ? 0 : o.pages - 1; o.halfDisplayed = o.displayedPages / 2; this.each(function() { self.addClass(o.cssStyle + ' simple-pagination').data('pagination', o); methods._draw.call(self); }); o.onInit(); return this; }, selectPage: function(page) { methods._selectPage.call(this, page - 1); return this; }, prevPage: function() { var o = this.data('pagination'); if (!o.invertPageOrder) { if (o.currentPage > 0) { methods._selectPage.call(this, o.currentPage - 1); } } else { if (o.currentPage < o.pages - 1) { methods._selectPage.call(this, o.currentPage + 1); } } return this; }, nextPage: function() { var o = this.data('pagination'); if (!o.invertPageOrder) { if (o.currentPage < o.pages - 1) { methods._selectPage.call(this, o.currentPage + 1); } } else { if (o.currentPage > 0) { methods._selectPage.call(this, o.currentPage - 1); } } return this; }, getPagesCount: function() { return this.data('pagination').pages; }, setPagesCount: function(count) { this.data('pagination').pages = count; }, getCurrentPage: function () { return this.data('pagination').currentPage + 1; }, destroy: function(){ this.empty(); return this; }, drawPage: function (page) { var o = this.data('pagination'); o.currentPage = page - 1; this.data('pagination', o); methods._draw.call(this); return this; }, redraw: function(){ methods._draw.call(this); return this; }, disable: function(){ var o = this.data('pagination'); o.disabled = true; this.data('pagination', o); methods._draw.call(this); return this; }, enable: function(){ var o = this.data('pagination'); o.disabled = false; this.data('pagination', o); methods._draw.call(this); return this; }, updateItems: function (newItems) { var o = this.data('pagination'); o.items = newItems; o.pages = methods._getPages(o); this.data('pagination', o); methods._draw.call(this); }, updateItemsOnPage: function (itemsOnPage) { var o = this.data('pagination'); o.itemsOnPage = itemsOnPage; o.pages = methods._getPages(o); this.data('pagination', o); methods._selectPage.call(this, 0); return this; }, getItemsOnPage: function() { return this.data('pagination').itemsOnPage; }, _draw: function() { var o = this.data('pagination'), interval = methods._getInterval(o), i, tagName; methods.destroy.call(this); tagName = (typeof this.prop === 'function') ? this.prop('tagName') : this.attr('tagName'); var $panel = tagName === 'UL' ? this : $('<ul' + (o.listStyle ? ' class="' + o.listStyle + '"' : '') + '></ul>').appendTo(this); // Generate Prev link if (o.prevText) { methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage - 1 : o.currentPage + 1, {text: o.prevText, classes: 'prev'}); } // Generate Next link (if option set for at front) if (o.nextText && o.nextAtFront) { methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'}); } // Generate start edges if (!o.invertPageOrder) { if (interval.start > 0 && o.edges > 0) { if(o.useStartEdge) { var end = Math.min(o.edges, interval.start); for (i = 0; i < end; i++) { methods._appendItem.call(this, i); } } if (o.edges < interval.start && (interval.start - o.edges != 1)) { $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>'); } else if (interval.start - o.edges == 1) { methods._appendItem.call(this, o.edges); } } } else { if (interval.end < o.pages && o.edges > 0) { if(o.useStartEdge) { var begin = Math.max(o.pages - o.edges, interval.end); for (i = o.pages - 1; i >= begin; i--) { methods._appendItem.call(this, i); } } if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) { $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>'); } else if (o.pages - o.edges - interval.end == 1) { methods._appendItem.call(this, interval.end); } } } // Generate interval links if (!o.invertPageOrder) { for (i = interval.start; i < interval.end; i++) { methods._appendItem.call(this, i); } } else { for (i = interval.end - 1; i >= interval.start; i--) { methods._appendItem.call(this, i); } } // Generate end edges if (!o.invertPageOrder) { if (interval.end < o.pages && o.edges > 0) { if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) { $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>'); } else if (o.pages - o.edges - interval.end == 1) { methods._appendItem.call(this, interval.end); } if(o.useEndEdge) { var begin = Math.max(o.pages - o.edges, interval.end); for (i = begin; i < o.pages; i++) { methods._appendItem.call(this, i); } } } } else { if (interval.start > 0 && o.edges > 0) { if (o.edges < interval.start && (interval.start - o.edges != 1)) { $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>'); } else if (interval.start - o.edges == 1) { methods._appendItem.call(this, o.edges); } if(o.useEndEdge) { var end = Math.min(o.edges, interval.start); for (i = end - 1; i >= 0; i--) { methods._appendItem.call(this, i); } } } } // Generate Next link (unless option is set for at front) if (o.nextText && !o.nextAtFront) { methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'}); } }, _getPages: function(o) { var pages = Math.ceil(o.items / o.itemsOnPage); return pages || 1; }, _getInterval: function(o) { return { start: Math.ceil(o.currentPage > o.halfDisplayed ? Math.max(Math.min(o.currentPage - o.halfDisplayed, (o.pages - o.displayedPages)), 0) : 0), end: Math.ceil(o.currentPage > o.halfDisplayed ? Math.min(o.currentPage + o.halfDisplayed, o.pages) : Math.min(o.displayedPages, o.pages)) }; }, _appendItem: function(pageIndex, opts) { var self = this, options, $link, o = self.data('pagination'), $linkWrapper = $('<li></li>'), $ul = self.find('ul'); pageIndex = pageIndex < 0 ? 0 : (pageIndex < o.pages ? pageIndex : o.pages - 1); options = { text: pageIndex + 1, classes: '' }; if (o.labelMap.length && o.labelMap[pageIndex]) { options.text = o.labelMap[pageIndex]; } options = $.extend(options, opts || {}); if (pageIndex == o.currentPage || o.disabled) { if (o.disabled || options.classes === 'prev' || options.classes === 'next') { $linkWrapper.addClass('disabled'); } else { $linkWrapper.addClass('active'); } $link = $('<span class="current">' + (options.text) + '</span>'); } else { $link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>'); $link.click(function(event){ return methods._selectPage.call(self, pageIndex, event); }); } if (options.classes) { $link.addClass(options.classes); } $linkWrapper.append($link); if ($ul.length) { $ul.append($linkWrapper); } else { self.append($linkWrapper); } }, _selectPage: function(pageIndex, event,callback) { var o = this.data('pagination'); o.currentPage = pageIndex; if (o.selectOnClick) { methods._draw.call(this); } return o.onPageClick(pageIndex + 1, event); } }; $.fn.pagination = function(method) { // Method calling logic if (methods[method] && method.charAt(0) != '_') { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.pagination'); } }; })(jQuery);
2)css simplePagination.css
/** * CSS themes for simplePagination.js * Author: Flavius Matis - http://flaviusmatis.github.com/ * URL: https://github.com/flaviusmatis/simplePagination.js */ ul.simple-pagination { list-style: none; } .simple-pagination { display: block; overflow: hidden; padding: 0 5px 5px 0; margin: 0; } .simple-pagination ul { list-style: none; padding: 0; margin: 0; } .simple-pagination li { list-style: none; padding: 0; margin: 0; float: left; } /*------------------------------------*\ Compact Theme Styles \*------------------------------------*/ .compact-theme a, .compact-theme span { float: left; color: #333; font-size:14px; line-height:24px; font-weight: normal; text-align: center; border: 1px solid #AAA; border-left: none; min-width: 14px; padding: 0 7px; box-shadow: 2px 2px 2px rgba(0,0,0,0.2); background: #efefef; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */ } .compact-theme a:hover { text-decoration: none; background: #efefef; /* Old browsers */ background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* IE10+ */ background: linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* W3C */ } .compact-theme li:first-child a, .compact-theme li:first-child span { border-left: 1px solid #AAA; border-radius: 3px 0 0 3px; } .compact-theme li:last-child a, .compact-theme li:last-child span { border-radius: 0 3px 3px 0; } .compact-theme .current { background: #bbbbbb; /* Old browsers */ background: -moz-linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(100%,#efefef)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* IE10+ */ background: linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* W3C */ cursor: default; } .compact-theme .ellipse { background: #EAEAEA; padding: 0 10px; cursor: default; } /*------------------------------------*\ Light Theme Styles \*------------------------------------*/ .light-theme a, .light-theme span { float: left; color: #666; font-size:14px; line-height:24px; font-weight: normal; text-align: center; border: 1px solid #BBB; min-width: 14px; padding: 0 7px; margin: 0 5px 0 0; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); background: #efefef; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */ } .light-theme a:hover { text-decoration: none; background: #FCFCFC; } .light-theme .current { background: #666; color: #FFF; border-color: #444; box-shadow: 0 1px 0 rgba(255,255,255,1), 0 0 2px rgba(0, 0, 0, 0.3) inset; cursor: default; } .light-theme .ellipse { background: none; border: none; border-radius: 0; box-shadow: none; font-weight: bold; cursor: default; } /*------------------------------------*\ Dark Theme Styles \*------------------------------------*/ .dark-theme a, .dark-theme span { float: left; color: #CCC; font-size:14px; line-height:24px; font-weight: normal; text-align: center; border: 1px solid #222; min-width: 14px; padding: 0 7px; margin: 0 5px 0 0; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); background: #555; /* Old browsers */ background: -moz-linear-gradient(top, #555 0%, #333 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#333)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #555 0%,#333 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #555 0%,#333 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #555 0%,#333 100%); /* IE10+ */ background: linear-gradient(top, #555 0%,#333 100%); /* W3C */ } .dark-theme a:hover { text-decoration: none; background: #444; } .dark-theme .current { background: #222; color: #FFF; border-color: #000; box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset; cursor: default; } .dark-theme .ellipse { background: none; border: none; border-radius: 0; box-shadow: none; font-weight: bold; cursor: default; } /*------------------------------------*\ zkmgtaobao Theme Styles \*------------------------------------*/ .zkmgtaobao-theme a, .zkmgtaobao-theme span { float: left; color: #303030; font-size:14px; line-height:24px; font-weight: normal; text-align: center; border: 1px solid #bfb7f9; min-width: 14px; padding: 0 7px; margin: 0 5px 0 0; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, white 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, white 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, white 0%,#ffffff 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, white 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(top, white 0%,#ffffff 100%); /* W3C */ } .zkmgtaobao-theme a:hover { text-decoration: none; background: #ffffff; } .zkmgtaobao-theme .current { background: #7a9eeb; color: #ffffff; border-color: #7a9eeb; box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset; cursor: default; } .zkmgtaobao-theme .ellipse { background: none; border: none; border-radius: 0; box-shadow: none; font-weight: bold; cursor: default; } .tzdr-pagination { float:right; }
3)封闭JS
/** * * @param url String * @param callback function * @param paginationQuery String * @param form formId */ liuqing.pager = function(url,callback,paginationQuery,form) { if ("undefined" == typeof paginationQuery) { paginationQuery = ".tzdr-pagination"; } var queryFun = function(page,form) { var dataForm = $.easyui.loadFormData(form); dataForm["page"] = page; $.post(basepath + url,dataForm, function(pageInfoData){ var rows = pageInfoData.pageResults; var totalCount = pageInfoData.totalCount; var pageSize = pageInfoData.countOfCurrentPage; var currentPage = pageInfoData.currentPage; try{ callback(rows); } catch(e){} $(paginationQuery).pagination({ items: totalCount, itemsOnPage: pageSize, currentPage: currentPage, prevText: '上一页', nextText: '下一页', cssStyle: 'zkmgtaobao-theme', onPageClick: function(page, event) { queryFun(page); } }); }); } queryFun(); };
4) 架构封闭
/** * 查询对象 */ $.extend({easyui:{}}); $.extend($.easyui,{ submitForm:function(id){ Liuqing.submitForm(id); }, rechangeSetValue:function(jqueryFind,valueTag,clickCallback,initCallback) { Liuqing.rechangeSetValue(jqueryFind,valueTag,clickCallback,initCallback); }, to$:function(money,digit){ return Liuqing.formatMoney(money, digit); }, $to:function(s,n) { return Liuqing.parseMoney(s,n); }, showWindow:function(jqueryFind,callback) { openWindow(jqueryFind,callback); }, closeWindow:function(jqueryFind,callback) { closeWindow(jqueryFind,callback); }, loadFormData:function(form) { return Liuqing.loadFormData(form); }, pager:function(url,callback,paginationQuery,form) { Liuqing.pager(url,callback,paginationQuery,form); } });
5)项目引入
<link rel="stylesheet" type="text/css" href="../static/plugins/pager/simplePagination.css" /> <script type="text/javascript" src="../static/plugins/pager/jquery.simplePagination.js"></script>
6)调用方法
<script type="text/javascript"> $(document).ready(function(){ $.easyui.pager("fuserTrade/getListData",function(rows){ $("#rows_id").html(""); $(rows).each(function (){ $("#rows_id").append("<ol><li class=\"sif_sl_time\">" + this.id + "</li></ol>"); }); }); }); </script>
运行结果
相关推荐
在Web开发中,分页控件是一个非常常见且重要的组件,尤其在数据量庞大的场景下,如电商网站的商品列表、论坛的帖子等。本压缩包中的"web分页控件(代码)超级简单的"提供了这样一个基础功能的实现,旨在帮助开发者...
在Web开发中,分页控件是一个至关重要的组件,它帮助用户在大量数据中进行有效导航,提升用户体验。"Web分页控件例子Demo"是一个示例项目,旨在展示如何在网页应用中实现高效且用户友好的分页功能。下面我们将深入...
在ASP.NET Web应用程序中,分页控件是用于展示大量数据时非常重要的工具,它可以将大量数据分成小块,让用户逐步浏览,提高用户体验并减轻服务器压力。本篇将深入探讨C# Web分页控件的使用,以及如何在实际项目中...
在Web开发中,分页控件是不可或缺的一部分,它用于处理大量数据的显示,提高用户体验,避免一次性加载过多数据导致页面加载慢或者内存消耗过大。本篇将详细讲解Web分页控件的设计原理、实现方式以及相关技术点。 ...
ASP.NET是一个强大的Web开发框架,其中AspDataPage可能是一个专为.NET环境设计的分页组件。这个组件可能包含了一些常用的类,比如PageControl、PagerSettings等,它们提供了设置分页样式、配置分页参数、处理分页...
c#分页控件,最快速度的分布控件 public class Pager : WebControl, IPostBackEventHandler, INamingContainer { private string CurrentPageText = "页次:{0}/{1}页 {2}条/页 共{3}条&...
分页控件是网页或应用程序中用于展示大量数据时,常用的一种用户界面元素。它能够帮助用户有效地浏览和导航长列表或表格中的信息,而无需一次性加载所有内容,从而提高用户体验和性能。在本篇文章中,我们将深入探讨...
在IT领域,分页控件是一种常见的用户界面组件,它用于在大量数据中提供高效的浏览体验,避免一次性加载所有数据导致的性能问题。本话题主要围绕一个自定义分页控件进行讨论,这个控件具备处理`DataTable`和SQL查询的...
自定义分页控件能够帮助我们更好地管理大量数据,提供流畅的用户体验。本文将深入探讨如何在WinForm应用中创建一个自定义分页控件,并给出一个完整的实例。 首先,理解分页的基本概念。分页是将大量数据分割成多个...
本主题聚焦于"winform分页控件DevExpress版",这是一个高级且功能丰富的控件,能够帮助开发者在WinForm应用程序中实现高效的数据浏览和分页功能。 DevExpress是一家知名的软件公司,提供了一系列高质量的开发工具,...
在.NET框架中,分页控件是Web应用程序中不可或缺的一部分,它用于处理大量数据的显示,提高用户体验。本文将深入探讨.NET自定义分页控件的设计与实现,以及它的优势和应用。 首先,分页控件是数据展示的核心组件,...
分页控件是Web应用中一种常见的用户界面组件,主要用于展示大数据集时进行分段显示,避免一次性加载所有数据导致页面响应慢或内存溢出。C#中的分页控件通常与数据库查询相结合,通过限制每次请求的数据量来实现这一...
分页控件的DLL和演示实例。 SQL2005的演示数据库备份在App_Data中,还原一下就行。 组件名: PagerF.DLL 自动创建支持SQL2005的分页存储过程。 示例注释很详细。 如果索要要DLL源码,请给我留言。(免费滴~~) ...
在IT领域,分页控件是一种常见的用户界面组件,它被广泛应用于Web前端、后台以及桌面应用程序(如WinForms)中,以帮助用户更有效地浏览和管理大量的数据。本篇文章将详细探讨“非常好用的分页控件”的相关知识点。 ...
ASP.NET Web 分页控件是开发Web应用时常用的一种组件,尤其在处理大量数据展示时,它可以有效地提高页面性能和用户体验。在这个主题中,我们将深入探讨如何使用ASP.NET中的分页功能,以及如何针对datagrid、repeater...
在.NET开发环境中,C# WinForm应用经常需要处理大量数据,这时自定义分页控件显得尤为重要。"C# Winform+devexpress 自定义分页控件"是为了解决这个问题而设计的一种解决方案,它利用DevExpress组件库的强大功能,...
Web用户控件分页是指在ASP.NET环境中创建一个自定义的用户控件,用于实现网页上的数据分页展示。这样的控件可以方便地重复使用,并且能够根据项目需求进行定制。 **一、Web用户控件的概念** Web用户控件是ASP.NET...
在Windows Forms(WinForms)开发中,为了处理大量数据并提高用户界面的可读性和交互性,常常会使用分页控件。标题“winfrom 分页控件”指的是在WinForms应用程序中实现分页功能的控件。这个控件允许用户以较小的...
在Android开发中,分页控件是不可或缺的一部分,它能够帮助用户更有效地浏览大量数据,同时减轻服务器压力。本教程将深入探讨如何在Android中创建一个自定义分页控件,以便实现高效、用户友好的界面。 首先,我们...
在Windows Forms(WinForm)应用开发中,分页控件是一种常见的用户界面元素,它用于在大量数据中实现浏览和导航。本项目提供了一个通用的WinForm分页控件的Demo,供开发者学习和参考。下面我们将深入探讨WinForm分页...