分页插件-jquery.page.js
/** * @eexample: $("#Pagination").pagination(<%=pcount%>, { callback: function(page_id, jq) { // 为翻页调用次函数。 //alert(page_id); 回调函数,进一步使用请参阅说明文档 }, prev_text: " 上一页", next_text: "下一页 ", items_per_page: <%=pagesize %>, //每页的数据个数 num_display_entries: 3, //两侧首尾分页条目数 current_page: <%=page%>, //当前页码 num_edge_entries: 2, //连续分页主体部分分页条目数 link_to:"?page=__id__" }); */ jQuery.fn.pagination = function(maxentries, opts) { opts = jQuery.extend({ items_per_page: 10, num_display_entries: 10, current_page: 0, num_edge_entries: 0, link_to: "#", prev_text: "Prev", next_text: "Next", ellipse_text: "...", prev_show_always: true, next_show_always: true, callback: function() { return false; } }, opts || {}); return this.each(function() { /** * Calculate the maximum number of pages */ function numPages() { return Math.ceil(maxentries / opts.items_per_page); } /** * Calculate start and end point of pagination links depending on * current_page and num_display_entries. * @return {Array} */ function getInterval() { var ne_half = Math.ceil(opts.num_display_entries / 2); var np = numPages(); var upper_limit = np - opts.num_display_entries; var start = current_page > ne_half ? Math.max(Math.min(current_page - ne_half, upper_limit), 0) : 0; var end = current_page > ne_half ? Math.min(current_page + ne_half, np) : Math.min(opts.num_display_entries, np); return [start, end]; } /** * This is the event handling function for the pagination links. * @param {int} page_id The new page number */ function pageSelected(page_id, evt) { current_page = page_id; drawLinks(); var continuePropagation = opts.callback(page_id, panel); if (!continuePropagation) { if (evt.stopPropagation) { evt.stopPropagation(); } else { evt.cancelBubble = true; } } return continuePropagation; } /** * This function inserts the pagination links into the container element */ function drawLinks() { panel.empty(); var interval = getInterval(); var np = numPages(); // This helper function returns a handler function that calls pageSelected with the right page_id var getClickHandler = function(page_id) { return function(evt) { return pageSelected(page_id, evt); } } // Helper function for generating a single link (or a span tag if it'S the current page) var appendItem = function(page_id, appendopts) { page_id = page_id < 0 ? 0 : (page_id < np ? page_id : np - 1); // Normalize page id to sane value appendopts = jQuery.extend({ text: page_id + 1, classes: "current" }, appendopts || {}); if (page_id == current_page) { var lnk = $("<span class='current'>" + (appendopts.text) + "</span>"); } else { var lnk = $("<a>" + (appendopts.text) + "</a>") .bind("click", getClickHandler(page_id)) .attr('href', opts.link_to.replace(/__id__/, page_id)); } if (appendopts.classes) { lnk.removeAttr('class'); lnk.addClass(appendopts.classes); } panel.append(lnk); } // Generate "Previous"-Link if (opts.prev_text && (current_page > 0 || opts.prev_show_always)) { appendItem(current_page - 1, { text: opts.prev_text, classes: "disabled" }); } // Generate starting points if (interval[0] > 0 && opts.num_edge_entries > 0) { var end = Math.min(opts.num_edge_entries, interval[0]); for (var i = 0; i < end; i++) { appendItem(i); } if (opts.num_edge_entries < interval[0] && opts.ellipse_text) { jQuery("<span>" + opts.ellipse_text + "</span>").appendTo(panel); } } // Generate interval links for (var i = interval[0]; i < interval[1]; i++) { appendItem(i); } // Generate ending points if (interval[1] < np && opts.num_edge_entries > 0) { if (np - opts.num_edge_entries > interval[1] && opts.ellipse_text) { jQuery("<span>" + opts.ellipse_text + "</span>").appendTo(panel); } var begin = Math.max(np - opts.num_edge_entries, interval[1]); for (var i = begin; i < np; i++) { appendItem(i); } } // Generate "Next"-Link if (opts.next_text && (current_page < np - 1 || opts.next_show_always)) { appendItem(current_page + 1, { text: opts.next_text, classes: "disabled" }); } } // Extract current_page from options var current_page = opts.current_page; // Create a sane value for maxentries and items_per_page maxentries = (!maxentries || maxentries < 0) ? 1 : maxentries; opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0) ? 1 : opts.items_per_page; // Store DOM element for easy access from all inner functions var panel = jQuery(this); // Attach control functions to the DOM element this.selectPage = function(page_id) { pageSelected(page_id); } this.prevPage = function() { if (current_page > 0) { pageSelected(current_page - 1); return true; } else { return false; } } this.nextPage = function() { if (current_page < numPages() - 1) { pageSelected(current_page + 1); return true; } else { return false; } } // When all initialisation is done, draw the links drawLinks(); }); }
相关推荐
总结来说,`z-pager.js`是一款功能齐全、易于使用的jQuery分页插件,结合`pager.css`样式文件,能够快速实现美观且实用的分页功能。无论是新手还是经验丰富的开发者,都可以通过简单的配置和调用,轻松地在项目中...
`jquery.pagination.js` 是一个轻量级且易于使用的 jQuery 分页插件,它提供了丰富的配置选项和自定义样式,能够帮助开发者快速实现动态加载、无限滚动等分页功能。 ### 一、基本使用 1. **引入依赖**:首先,你...
jQuery.mmenu是一款强大的JavaScript插件,专为构建响应式、交互式的侧边菜单而设计。它与jQuery Mobile框架结合使用,可以创造出用户界面(UI)中最具吸引力的侧边导航元素。在本文中,我们将深入探讨这两个库的...
**jQuery Pagination 分页插件详解** 在Web开发中,数据量过大的页面通常需要实现分页功能,以提高用户体验和加载速度。jQuery Pagination是一款轻量级、易用的前端分页插件,它能帮助开发者快速实现高效且美观的...
`dropload.js`是一个专为移动端H5设计的轻量级分页插件,它使得用户在滚动到底部时可以无缝地加载更多数据,提供了良好的用户体验。下面我们将详细介绍`dropload.js`的相关知识点。 ### 1. dropload.js概述 `...
JQuery.page.js分页插件的源码,使用方法参见http://www.lanrenzhijia.com/jquery/fenye-jquery.page.html
**jQuery分页插件——jquery.tabulation.js** 在网页开发中,当数据量过大时,分页是一个必不可少的功能,它可以有效提升用户体验,避免一次性加载大量数据导致页面响应速度下降。`jquery.tabulation.js`就是这样一...
**jQuery分页插件pagination.js** 是一个广泛应用于网页数据分页的JavaScript库,它基于强大的jQuery框架构建,为开发者提供了高效、灵活的分页解决方案。分页是Web应用程序中常见的功能,特别是在处理大量数据时,...
而jQuery.paginate.js正是一个基于jQuery的轻量级分页插件,其设计简洁、易于使用,能够快速为网页添加高效且美观的分页效果。 一、jQuery.paginate.js核心功能 1. 简单易用:jQuery.paginate.js的核心优势在于其...
《jQuery分页插件——jquery.pager.js详解》 在Web开发中,数据展示往往涉及到大量的信息处理,尤其是在用户交互时,如何优雅地处理大量数据的分页展示,成为了前端开发者面临的重要问题。jQuery作为一款广泛使用的...
* jquery 表格打印插件 * * 作者: LiuJunGuang * 日期:2013年6月4日 * 分页样式(需要自定义): * @media print { * .pageBreak { page-break-after:always; } * } * 使用例子: * $(function(){ * $...
"jquery.pagination.js"是JavaScript实现的分页逻辑代码,它包含了分页插件的核心功能,如计算总页数、生成分页元素、处理用户交互等。开发者需要在HTML文档中引入这个脚本文件,通常是在`<head>`标签内通过`...
**jQuery Paginate.js 分页插件详解** 在Web开发中,数据展示往往涉及到大量的记录,为了提高用户体验,分页是一种常见的处理方式。`jQuery Paginate.js` 是一个轻量级的jQuery分页插件,它使得在网页上实现美观且...
接下来,创建一个 HTML 元素作为分页容器,并通过 JavaScript 初始化分页插件。例如: ```html <div id="pagination"></div> ``` ```javascript $(document).ready(function() { $('#pagination').pagination({ ...
jQuery.jpage.js是一款基于jQuery的轻量级分页插件,用于实现网页内容的分页显示,提升用户体验,尤其在处理大量数据时效果显著。它提供了动态加载、切换动画等多种功能,使得用户在浏览长列表时能流畅地进行翻页...
3. **jquery.page.js** - 分页插件的主要实现代码,包含分页逻辑和样式设置。 4. **jquery.page.css** - 提供了预设的CSS样式,用于控制分页组件的外观。 **二、使用步骤** 1. **引入依赖** - 首先需要在HTML页面...
`jquery.page.js`是jQuery.page分页插件的核心文件,它扩展了jQuery对象,添加了用于创建和操作分页的函数。最后,`jquery.page.css`包含了分页样式的定义,决定了分页控件的视觉效果。 jQuery.page分页控件的使用...
`jqueryPage.js` 是一个基于 jQuery 的分页插件,用于帮助开发者轻松实现网页的分页功能。 `jqueryPage.js` 插件的使用首先需要引入 jQuery 库和该插件的脚本文件。在 HTML 页面中,通常将 jQuery 库放在 `<head>` ...
jQuery插件PagedTable是一种广泛使用的前端解决方案,用于在网页上展示大量数据时实现表格的分页功能。这种插件可以极大地提升用户体验,因为它避免了一次性加载所有数据导致页面加载速度变慢的问题。下面我们将深入...
`jQuery.pageFoot` 是一个基于jQuery的分页插件,其核心思想是将大量数据分成多个页面,让用户能够逐页浏览,而不是一次性加载所有内容。这样既节省了服务器资源,也提高了页面加载速度,对移动设备尤其友好。这个...