jquery.pagination.js分页
2016-03-08 16:33
691 查看
参数说明
js代码
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
参数名 | 描述 | 参数值 |
---|---|---|
maxentries | 总条目数 | 必选参数,整数 |
items_per_page | 每页显示的条目数 | 可选参数,默认是10 |
num_display_entries | 连续分页主体部分显示的分页条目数 | 可选参数,默认是10 |
current_page | 当前选中的页面 | 可选参数,默认是0,表示第1页 |
num_edge_entries | 两侧显示的首尾分页的条目数 | 可选参数,默认是0 |
link_to | 分页的链接 | 字符串,可选参数,默认是"#" |
prev_text | “前一页”分页按钮上显示的文字 | 字符串参数,可选,默认是"Prev" |
next_text | “下一页”分页按钮上显示的文字 | 字符串参数,可选,默认是"Next" |
ellipse_text | 省略的页数用什么文字表示 | 可选字符串参数,默认是"…" |
prev_show_always | 是否显示“前一页”分页按钮 | 布尔型,可选参数,默认为true,即显示“前一页”按钮 |
next_show_always | 是否显示“下一页”分页按钮 | 布尔型,可选参数,默认为true,即显示“下一页”按钮 |
callback | 回调函数 | 当点击链接的时候此函数被调用,此函数接受两个参数,新一页的id和pagination容器(一个DOM元素)。如果回调函数返回false,则pagination事件停止执行 |
![](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
/** * This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version 1.1 * @param {int} maxentries Number of entries to paginate * @param {Object} opts Several options (see README for documentation) * @return {Object} jQuery Object */ 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(); }); }
$("#Pagination").pagination(<%=pcount%>, { callback: pageselectCallback,//PageCallback() 为翻页调用次函数。 prev_text: " 上一页", next_text: "下一页 ", items_per_page: <%=pagesize %>, //每页的数据个数 num_display_entries: 3, //两侧首尾分页条目数 current_page: <%=page%>, //当前页码 num_edge_entries: 2, //连续分页主体部分分页条目数 link_to:"?page=__id__" });
相关文章推荐
- jquery.inArray()和splice()使用小记
- jQuery.prop() 函数详解
- jquery笔记(仅供个人参考)
- jQuery设置 select、radio、checkbox 默认选中的值
- jQuery插件imgAreaSelect
- jquery.qrcode.min.js生成二维码 通过前端实现二维码生成
- JQuery里的子元素过滤选择器,加空格与不加空格的区别
- jQuery.pagination.js---jquery自带分页
- jQuery
- jquery 中多条件选择器,相对选择器,层次选择器的区别
- jQuery实现的分页功能,包括ajax请求,后台数据,有完整demo
- 关于Jquery的parent和parents
- jQuery的filter方法和find方法的(个人使用总结)
- jQuery学习记录
- jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
- jQuery 模块介绍
- jquery中unbind、bind注意事项
- 分享几个实用的jquery工具函数
- jQuery的三种$()
- jQuery添加/改变/移除CSS类及判断是否已经存在CSS