分页插件-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(); }); }
相关推荐
需要引入pager.css及jquery.z-pager.js Html: <div id="pager" class="pager clearfix"> </div>
插件描述:表格分页,li分页.
JQuery.page.js分页插件的源码,使用方法参见http://www.lanrenzhijia.com/jquery/fenye-jquery.page.html
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 页面内容: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%> <!DOCTYPE ...
简单的jQuery分页插件下载是一款不用分页即可显示的jQuery插件jQuery.page.js。
* jquery 表格打印插件 * * 作者: LiuJunGuang * 日期:2013年6月4日 * 分页样式(需要自定义): * @media print { * .pageBreak { page-break-after:always; } * } * 使用例子: * $(function(){ * $...
NULL 博文链接:https://hiandroid.iteye.com/blog/792062
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活...
基于jquery.page.js的一款简单的分页效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简单的jQuery分页插件</title> <style...
jQuery基于Bootstrap分页插件是一款分页插件设置固定列表分页显示,支持动态分页数据代码。 jQuery(document).ready(function($){ for (var i = 1; i ; i ) { $('.list-group').append('<li class="list...
比较基础的JS分页,基于jQuery的插件,写的不好,还望见谅。。
paging.js分页插件 <script src="js/jquery.min.js"> <script type="text/javascript" src="js/paging.js"> <!--分页--> <div id="page" class="page_div"></div>
jQuery(document).ready(function($){ for (var i = 1; i ; i ) { $('.list-group').append('<li class="list-group-item"> Item ' i '</li>'); } $('.list-group').paginathing({ perPage: 5, ...
jquery-pagination分页插件 1、引入pagination.css和jquery.pagination.js文件; 2、配置可参考jquery.pagination.js文件50行的配置默认参数,含参数注释; var defaults = { totalData: 0, //数据总条数 show...
jquery.pages#简介一个简单的jQuery分页...引入jQuery和jquery.pages插件,如图:[removed][removed][removed][removed]初始化参数初始化分页插件:$(function(){ //init page plugin $("div.page").pages({ url: '',
jQuery简单实用的分页插件Page是一款兼容IE8及以上浏览器,配置简单实用,推荐下载。
html 分页插件,适用大部分浏览器,简单易懂!!!!!!!!!!!!!!!!!!!!!!!!!!
SelectPage.js是一款强大的jquery下拉分页选择插件。SelectPage.js下拉分页选择插件界面简洁,支持下拉,分页,键盘操作等功能。
非常实用的分页插件,只需简单设置数目条数,分页数 function pageselectCallback(page_id, jq){ $('#Searchresult').text("Showing search results "+((page_id*10)+1)+"-"+((page_id*10)+10)); } $...
我一向是见招拆招的解决思路,这里需要运用到3个东西——标签页效果插件和分页插件,jquery的getJson请求。 因此我使用了jquery-ui插件,jquery-page插件,现提供下载地址:jquery_all.rar 里面包含了3个JS脚本文件...