参数说明
| 参数名 | 描述 | 参数值 |
|---|---|---|
| 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事件停止执行 |
【JS部分】：
1 /** 2 * This jQuery plugin displays pagination links inside the selected elements. 3 * 4 * @author Gabriel Birke (birke *at* d-scribe *dot* de) 5 * @version 1.1 6 * @param {int} maxentries Number of entries to paginate 7 * @param {Object} opts Several options (see README for documentation) 8 * @return {Object} jQuery Object 9 */ 10 jQuery.fn.pagination = function(maxentries, opts) { 11 opts = jQuery.extend({ 12 items_per_page: 10, 13 num_display_entries: 10, 14 current_page: 0, 15 num_edge_entries: 0, 16 link_to: "#", 17 prev_text: "Prev", 18 next_text: "Next", 19 ellipse_text: "...", 20 prev_show_always: true, 21 next_show_always: true, 22 callback: function() { return false; } 23 }, opts || {}); 24 25 return this.each(function() { 26 /** 27 * Calculate the maximum number of pages 28 */ 29 function numPages() { 30 return Math.ceil(maxentries / opts.items_per_page); 31 } 32 33 /** 34 * Calculate start and end point of pagination links depending on 35 * current_page and num_display_entries. 36 * @return {Array} 37 */ 38 function getInterval() { 39 var ne_half = Math.ceil(opts.num_display_entries / 2); 40 var np = numPages(); 41 var upper_limit = np - opts.num_display_entries; 42 var start = current_page > ne_half ? Math.max(Math.min(current_page - ne_half, upper_limit), 0) : 0; 43 var end = current_page > ne_half ? Math.min(current_page + ne_half, np) : Math.min(opts.num_display_entries, np); 44 return [start, end]; 45 } 46 47 /** 48 * This is the event handling function for the pagination links. 49 * @param {int} page_id The new page number 50 */ 51 function pageSelected(page_id, evt) { 52 current_page = page_id; 53 drawLinks(); 54 var continuePropagation = opts.callback(page_id, panel); 55 if (!continuePropagation) { 56 if (evt.stopPropagation) { 57 evt.stopPropagation(); 58 } 59 else { 60 evt.cancelBubble = true; 61 } 62 } 63 return continuePropagation; 64 } 65 66 /** 67 * This function inserts the pagination links into the container element 68 */ 69 function drawLinks() { 70 panel.empty(); 71 var interval = getInterval(); 72 var np = numPages(); 73 // This helper function returns a handler function that calls pageSelected with the right page_id 74 var getClickHandler = function(page_id) { 75 return function(evt) { return pageSelected(page_id, evt); } 76 } 77 // Helper function for generating a single link (or a span tag if it'S the current page) 78 var appendItem = function(page_id, appendopts) { 79 page_id = page_id < 0 ? 0 : (page_id < np ? page_id : np - 1); // Normalize page id to sane value 80 appendopts = jQuery.extend({ text: page_id + 1, classes: "current" }, appendopts || {}); 81 if (page_id == current_page) { 82 var lnk = $("<span class='current'>" + (appendopts.text) + "</span>"); 83 } 84 else { 85 var lnk = $("<a>" + (appendopts.text) + "</a>") 86 .bind("click", getClickHandler(page_id)) 87 .attr('href', opts.link_to.replace(/__id__/, page_id)); 88 89 90 } 91 if (appendopts.classes) { lnk.removeAttr('class'); lnk.addClass(appendopts.classes); } 92 panel.append(lnk); 93 } 94 // Generate "Previous"-Link 95 if (opts.prev_text && (current_page > 0 || opts.prev_show_always)) { 96 appendItem(current_page - 1, { text: opts.prev_text, classes: "disabled" }); 97 } 98 // Generate starting points 99 if (interval[0] > 0 && opts.num_edge_entries > 0) { 100 var end = Math.min(opts.num_edge_entries, interval[0]); 101 for (var i = 0; i < end; i++) { 102 appendItem(i); 103 } 104 if (opts.num_edge_entries < interval[0] && opts.ellipse_text) { 105 jQuery("<span>" + opts.ellipse_text + "</span>").appendTo(panel); 106 } 107 } 108 // Generate interval links 109 for (var i = interval[0]; i < interval[1]; i++) { 110 appendItem(i); 111 } 112 // Generate ending points 113 if (interval[1] < np && opts.num_edge_entries > 0) { 114 if (np - opts.num_edge_entries > interval[1] && opts.ellipse_text) { 115 jQuery("<span>" + opts.ellipse_text + "</span>").appendTo(panel); 116 } 117 var begin = Math.max(np - opts.num_edge_entries, interval[1]); 118 for (var i = begin; i < np; i++) { 119 appendItem(i); 120 } 121 122 } 123 // Generate "Next"-Link 124 if (opts.next_text && (current_page < np - 1 || opts.next_show_always)) { 125 appendItem(current_page + 1, { text: opts.next_text, classes: "disabled" }); 126 } 127 } 128 129 // Extract current_page from options 130 var current_page = opts.current_page; 131 // Create a sane value for maxentries and items_per_page 132 maxentries = (!maxentries || maxentries < 0) ? 1 : maxentries; 133 opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0) ? 1 : opts.items_per_page; 134 // Store DOM element for easy access from all inner functions 135 var panel = jQuery(this); 136 // Attach control functions to the DOM element 137 this.selectPage = function(page_id) { pageSelected(page_id); } 138 this.prevPage = function() { 139 if (current_page > 0) { 140 pageSelected(current_page - 1); 141 return true; 142 } 143 else { 144 return false; 145 } 146 } 147 this.nextPage = function() { 148 if (current_page < numPages() - 1) { 149 pageSelected(current_page + 1); 150 return true; 151 } 152 else { 153 return false; 154 } 155 } 156 // When all initialisation is done, draw the links 157 drawLinks(); 158 }); 159 }