pagination jquery最简单的分页【无刷新和刷新都通用】
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了pagination jquery最简单的分页【无刷新和刷新都通用】，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含36688字，纯文字阅读大概需要53分钟。
内容图文
参数说明
| 参数名 | 描述 | 参数值 |
|---|---|---|
| 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() { returnfalse; }
23 }, opts || {});
24 25returnthis.each(function() {
26/**
27 * Calculate the maximum number of pages
28*/ 29function numPages() {
30return 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*/ 38function getInterval() {
39var ne_half = Math.ceil(opts.num_display_entries / 2);
40var np = numPages();
41var upper_limit = np - opts.num_display_entries;
42var start = current_page > ne_half ? Math.max(Math.min(current_page - ne_half, upper_limit), 0) : 0;
43var end = current_page > ne_half ? Math.min(current_page + ne_half, np) : Math.min(opts.num_display_entries, np);
44return [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*/ 51function pageSelected(page_id, evt) {
52 current_page = page_id;
53 drawLinks();
54var continuePropagation = opts.callback(page_id, panel);
55if (!continuePropagation) {
56if (evt.stopPropagation) {
57 evt.stopPropagation();
58 }
59else {
60 evt.cancelBubble = true;
61 }
62 }
63return continuePropagation;
64 }
65 66/**
67 * This function inserts the pagination links into the container element
68*/ 69function drawLinks() {
70 panel.empty();
71var interval = getInterval();
72var np = numPages();
73// This helper function returns a handler function that calls pageSelected with the right page_id 74var getClickHandler = function(page_id) {
75returnfunction(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) 78var 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 || {});
81if (page_id == current_page) {
82var lnk = $("<span class=‘current‘>" + (appendopts.text) + "</span>");
83 }
84else {
85var lnk = $("<a>" + (appendopts.text) + "</a>")
86 .bind("click", getClickHandler(page_id))
87 .attr(‘href‘, opts.link_to.replace(/__id__/, page_id));
88 89 90 }
91if (appendopts.classes) { lnk.removeAttr(‘class‘); lnk.addClass(appendopts.classes); }
92 panel.append(lnk);
93 }
94// Generate "Previous"-Link 95if (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 99if (interval[0] > 0 && opts.num_edge_entries > 0) {
100var end = Math.min(opts.num_edge_entries, interval[0]);
101for (var i = 0; i < end; i++) {
102 appendItem(i);
103 }
104if (opts.num_edge_entries < interval[0] && opts.ellipse_text) {
105 jQuery("<span>" + opts.ellipse_text + "</span>").appendTo(panel);
106 }
107 }
108// Generate interval links109for (var i = interval[0]; i < interval[1]; i++) {
110 appendItem(i);
111 }
112// Generate ending points113if (interval[1] < np && opts.num_edge_entries > 0) {
114if (np - opts.num_edge_entries > interval[1] && opts.ellipse_text) {
115 jQuery("<span>" + opts.ellipse_text + "</span>").appendTo(panel);
116 }
117var begin = Math.max(np - opts.num_edge_entries, interval[1]);
118for (var i = begin; i < np; i++) {
119 appendItem(i);
120 }
121122 }
123// Generate "Next"-Link124if (opts.next_text && (current_page < np - 1 || opts.next_show_always)) {
125 appendItem(current_page + 1, { text: opts.next_text, classes: "disabled" });
126 }
127 }
128129// Extract current_page from options130var current_page = opts.current_page;
131// Create a sane value for maxentries and items_per_page132 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 functions135var panel = jQuery(this);
136// Attach control functions to the DOM element 137this.selectPage = function(page_id) { pageSelected(page_id); }
138this.prevPage = function() {
139if (current_page > 0) {
140 pageSelected(current_page - 1);
141returntrue;
142 }
143else {
144returnfalse;
145 }
146 }
147this.nextPage = function() {
148if (current_page < numPages() - 1) {
149 pageSelected(current_page + 1);
150returntrue;
151 }
152else {
153returnfalse;
154 }
155 }
156// When all initialisation is done, draw the links157 drawLinks();
158 });
159 }
【CSS部分】：
1
div.digg {padding: 3px; margin: 3px; text-align: center; font-family:Verdana; font-size:12px;}
2div.digg a { border: #aaaadd 1px solid; padding:2px 5px; margin: 2px; color: #000099; text-decoration: none}
3div.digg a:hover {border: #000099 1px solid; color: #000; }
4div.digg a:active {border: #000099 1px solid; color: #000; }
5div.digg span.current {border: #000099 1px solid; padding:2px 5px; font-weight: bold; margin: 2px; color: #fff;background-color: #000099}
6div.digg span.disabled { border: #eee 1px solid; padding:2px 5px; margin: 2px; color: #ddd; padding-top: 2px;}
7 8 9/*css meneame style pagination*/ 10div.meneame {
11 padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 3px; margin: 3px; color: #ff6500; padding-top: 3px; text-align: center; font-family:Verdana; font-size:12px;
12 }
13div.meneame a {
14 border-right: #ff9600 1px solid; padding-right: 7px; background-position: 50% bottom; border-top: #ff9600 1px solid; padding-left: 7px; background-image: url(meneame.jpg); padding-bottom: 5px; border-left: #ff9600 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff9600 1px solid; text-decoration: none
15 }
16div.meneame a:hover {
17 border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794
18 }
19div.meneame a:active {
20 border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794
21 }
22div.meneame span.current {
23 border-right: #ff6500 1px solid; padding-right: 7px; border-top: #ff6500 1px solid; padding-left: 7px; font-weight: bold; padding-bottom: 5px; border-left: #ff6500 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff6500 1px solid; background-color: #ffbe94
24 }
25div.meneame span.disabled {
26 border-right: #ffe3c6 1px solid; padding-right: 7px; border-top: #ffe3c6 1px solid; padding-left: 7px; padding-bottom: 5px; border-left: #ffe3c6 1px solid; color: #ffe3c6; margin-right: 3px; padding-top: 5px; border-bottom: #ffe3c6 1px solid
27 }
28 29/*css flickr style pagination*/ 30div.flickr {
31 padding:0px;margin:0px; text-align:center; font-family:Verdana; font-size:12px;
32 }
33div.flickr a {
34 border-right: #dedfde 1px solid; padding-right: 6px; background-position: 50% bottom; border-top: #dedfde 1px solid; padding-left: 6px; padding-bottom: 2px; border-left: #dedfde 1px solid; color: #0061de; margin-right: 3px; padding-top: 2px; border-bottom: #dedfde 1px solid; text-decoration: none
35 }
36div.flickr a:hover {
37 border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de
38 }
39div.meneame a:active {
40 border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de
41 }
42div.flickr span.current {
43 padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #ff0084; margin-right: 3px; padding-top: 2px
44 }
45div.flickr span.disabled {
46 padding-right: 6px; padding-left: 6px; padding-bottom: 2px; color: #adaaad; margin-right: 3px; padding-top: 2px
47 }
48 49/*css scott style pagination*/ 50 51div.scott {
52 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center; font-family:Verdana; font-size:12px;
53 }
54div.scott a {
55 border-right: #ddd 1px solid; padding-right: 5px; border-top: #ddd 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #ddd 1px solid; color: #88af3f; margin-right: 2px; padding-top: 2px; border-bottom: #ddd 1px solid; text-decoration: none
56 }
57div.scott a:hover {
58 border-right: #85bd1e 1px solid; border-top: #85bd1e 1px solid; border-left: #85bd1e 1px solid; color: #638425; border-bottom: #85bd1e 1px solid; background-color: #f1ffd6
59 }
60div.scott a:active {
61 border-right: #85bd1e 1px solid; border-top: #85bd1e 1px solid; border-left: #85bd1e 1px solid; color: #638425; border-bottom: #85bd1e 1px solid; background-color: #f1ffd6
62 }
63div.scott span.current {
64 border-right: #b2e05d 1px solid; padding-right: 5px; border-top: #b2e05d 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #b2e05d 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #b2e05d 1px solid; background-color: #b2e05d
65 }
66div.scott span.disabled {
67 border-right: #f3f3f3 1px solid; padding-right: 5px; border-top: #f3f3f3 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #f3f3f3 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #f3f3f3 1px solid
68 }
69 70 71 72/*css quotes style pagination*/ 73 74div.quotes {
75 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center; font-family:Verdana; font-size:12px;
76 }
77div.quotes a {
78 border-right: #ddd 1px solid; padding-right: 5px; border-top: #ddd 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #ddd 1px solid; color: #aaa; margin-right: 2px; padding-top: 2px; border-bottom: #ddd 1px solid; text-decoration: none
79 }
80div.quotes a:hover {
81 border-right: #a0a0a0 1px solid; padding-right: 5px; border-top: #a0a0a0 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #a0a0a0 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: #a0a0a0 1px solid
82 }
83div.quotes a:active {
84 border-right: #a0a0a0 1px solid; padding-right: 5px; border-top: #a0a0a0 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #a0a0a0 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: #a0a0a0 1px solid
85 }
86div.quotes span.current {
87 border-right: #e0e0e0 1px solid; padding-right: 5px; border-top: #e0e0e0 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #e0e0e0 1px solid; color: #aaa; margin-right: 2px; padding-top: 2px; border-bottom: #e0e0e0 1px solid; background-color: #f0f0f0
88 }
89div.quotes span.disabled {
90 border-right: #f3f3f3 1px solid; padding-right: 5px; border-top: #f3f3f3 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #f3f3f3 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #f3f3f3 1px solid
91 }
92 93 94 95/*css black style pagination*/ 96 97div.black {
98 padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 10px; margin: 3px; color: #a0a0a0; padding-top: 10px; background-color: #000; text-align: center; font-family:Verdana; font-size:12px;
99 }
100div.black a {
101 border-right: #909090 1px solid; padding-right: 5px; background-position: 50% bottom; border-top: #909090 1px solid; padding-left: 5px; background-image: url(bar.gif); padding-bottom: 2px; border-left: #909090 1px solid; color: #c0c0c0; margin-right: 3px; padding-top: 2px; border-bottom: #909090 1px solid; text-decoration: none
102 }
103div.black a:hover {
104 border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040
105 }
106div.black a:active {
107 border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040
108 }
109div.black span.current {
110 border-right: #ffffff 1px solid; padding-right: 5px; border-top: #ffffff 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ffffff 1px solid; color: #ffffff; margin-right: 3px; padding-top: 2px; border-bottom: #ffffff 1px solid; background-color: #606060
111 }
112div.black span.disabled {
113 border-right: #606060 1px solid; padding-right: 5px; border-top: #606060 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #606060 1px solid; color: #808080; margin-right: 3px; padding-top: 2px; border-bottom: #606060 1px solid
114 }
115116117118119/*css black2 style pagination*/120121div.black2 {
122 padding-right: 7px; padding-left: 7px; padding-bottom: 7px; margin: 3px; padding-top: 7px; text-align: center; font-family:Verdana; font-size:12px;
123 }
124div.black2 a {
125 border-right: #000000 1px solid; padding-right: 5px; border-top: #000000 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #000000 1px solid; color: #000000; padding-top: 2px; border-bottom: #000000 1px solid; text-decoration: none
126 }
127div.black2 a:hover {
128 border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; color: #fff; border-bottom: #000000 1px solid; background-color: #000
129 }
130div.black2 a:active {
131 border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; color: #fff; border-bottom: #000000 1px solid; background-color: #000
132 }
133div.black2 span.current {
134 border-right: #000000 1px solid; padding-right: 5px; border-top: #000000 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #000000 1px solid; color: #fff; padding-top: 2px; border-bottom: #000000 1px solid; background-color: #000000
135 }
136div.black2 span.disabled {
137 border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid
138 }
139140141142143/*css black-red style pagination*/144145div.black-red {
146 font-size: 11px; color: #fff; font-family: tahoma, arial, helvetica, sans-serif; background-color: #3e3e3e;
147 }
148div.black-red a {
149 padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #3e3e3e; text-decoration: none
150 }
151div.black-red a:hover {
152 color: #fff; background-color: #ec5210
153 }
154div.black-red a:active {
155 color: #fff; background-color: #ec5210
156 }
157div.black-red span.current {
158 padding-right: 5px; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #313131
159 }
160div.black-red span.disabled {
161 padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #868686; padding-top: 2px; background-color: #3e3e3e
162 }
163164165/*css green-black style pagination*/166167div.green-black {
168 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center; font-family:Verdana; font-size:12px;
169 }
170div.green-black a {
171 border-right: #2c2c2c 1px solid; padding-right: 5px; border-top: #2c2c2c 1px solid; padding-left: 5px; background: url(image1.gif) #2c2c2c; padding-bottom: 2px; border-left: #2c2c2c 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #2c2c2c 1px solid; text-decoration: none
172 }
173div.green-black a:hover {
174 border-right: #aad83e 1px solid; border-top: #aad83e 1px solid; background: url(image2.gif) #aad83e; border-left: #aad83e 1px solid; color: #fff; border-bottom: #aad83e 1px solid
175 }
176div.green-black a:active {
177 border-right: #aad83e 1px solid; border-top: #aad83e 1px solid; background: url(image2.gif) #aad83e; border-left: #aad83e 1px solid; color: #fff; border-bottom: #aad83e 1px solid
178 }
179div.green-black span.current {
180 border-right: #aad83e 1px solid; padding-right: 5px; border-top: #aad83e 1px solid; padding-left: 5px; font-weight: bold; background: url(image2.gif) #aad83e; padding-bottom: 2px; border-left: #aad83e 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #aad83e 1px solid
181 }
182div.green-black span.disabled {
183 border-right: #f3f3f3 1px solid; padding-right: 5px; border-top: #f3f3f3 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #f3f3f3 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #f3f3f3 1px solid
184 }
185186/*css grayr style pagination*/187188div.grayr {
189 padding-right: 2px; padding-left: 2px; font-size: 11px; padding-bottom: 2px; padding-top: 2px; font-family: tahoma, arial, helvetica, sans-serif; background-color: #c1c1c1;
190 }
191div.grayr a {
192 padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #000; padding-top: 2px; background-color: #c1c1c1; text-decoration: none
193 }
194div.grayr a:hover {
195 color: #000; background-color: #99ffff
196 }
197div.grayr a:active {
198 color: #000; background-color: #99ffff
199 }
200div.grayr span.current {
201 padding-right: 5px; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; color: #303030; padding-top: 2px; background-color: #fff
202 }
203div.grayr span.disabled {
204 padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #797979; padding-top: 2px; background-color: #c1c1c1
205 }
206207208209210/*css yellow style pagination*/211212div.yellow {
213 padding-right: 7px; padding-left: 7px; padding-bottom: 7px; margin: 3px; padding-top: 7px; text-align: center; font-family:Verdana; font-size:12px;
214 }
215div.yellow a {
216 border-right: #ccc 1px solid; padding-right: 5px; border-top: #ccc 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #ccc 1px solid; color: #000; padding-top: 2px; border-bottom: #ccc 1px solid; text-decoration: none
217 }
218div.yellow a:hover {
219 border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; border-left: #f0f0f0 1px solid; color: #000; border-bottom: #f0f0f0 1px solid
220 }
221div.yellow a:active {
222 border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; border-left: #f0f0f0 1px solid; color: #000; border-bottom: #f0f0f0 1px solid
223 }
224div.yellow span.current {
225 border-right: #d9d300 1px solid; padding-right: 5px; border-top: #d9d300 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #d9d300 1px solid; color: #fff; padding-top: 2px; border-bottom: #d9d300 1px solid; background-color: #d9d300
226 }
227div.yellow span.disabled {
228 border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid
229 }
230231232233/*css jogger style pagination*/234235div.jogger {
236 padding-right: 2px; padding-left: 2px; padding-bottom: 2px; margin: 7px; padding-top: 2px; font-family: "lucida sans unicode", "lucida grande", lucidagrande, "lucida sans", geneva, verdana, sans-serif
237 }
238div.jogger a {
239 padding-right: 0.64em; padding-left: 0.64em; padding-bottom: 0.43em; margin: 2px; color: #fff; padding-top: 0.5em; background-color: #ee4e4e; text-decoration: none
240 }
241div.jogger a:hover {
242 padding-right: 0.64em; padding-left: 0.64em; padding-bottom: 0.43em; margin: 2px; color: #fff; padding-top: 0.5em; background-color: #de1818
243 }
244div.jogger a:active {
245 padding-right: 0.64em; padding-left: 0.64em; padding-bottom: 0.43em; margin: 2px; color: #fff; padding-top: 0.5em; background-color: #de1818
246 }
247div.jogger span.current {
248 padding-right: 0.64em; padding-left: 0.64em; padding-bottom: 0.43em; margin: 2px; color: #6d643c; padding-top: 0.5em; background-color: #f6efcc
249 }
250div.jogger span.disabled {
251 display: none
252 }
253254255256/*css starcraft2 style pagination*/257258div.starcraft2 {
259 padding-right: 3px; padding-left: 3px; font-weight: bold; font-size: 13.5pt; padding-bottom: 3px; margin: 3px; color: #fff; padding-top: 3px; font-family: arial; background-color: #000; text-align: center
260 }
261div.starcraft2 a {
262 margin: 2px; color: #fa0; background-color: #000; text-decoration: none
263 }
264div.starcraft2 a:hover {
265 color: #fff; background-color: #000
266 }
267div.starcraft2 a:active {
268 color: #fff; background-color: #000
269 }
270div.starcraft2 span.current {
271 font-weight: bold; margin: 2px; color: #fff; background-color: #000
272 }
273div.starcraft2 span.disabled {
274 margin: 2px; color: #444; background-color: #000
275 }
276277278279/*css tres style pagination*/280281div.tres {
282 padding-right: 7px; padding-left: 7px; font-weight: bold; font-size: 13.2pt; padding-bottom: 7px; margin: 3px; padding-top: 7px; font-family: arial, helvetica, sans-serif; text-align: center
283 }
284div.tres a {
285 border-right: #d9d300 2px solid; padding-right: 5px; border-top: #d9d300 2px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #d9d300 2px solid; color: #fff; padding-top: 2px; border-bottom: #d9d300 2px solid; background-color: #d90; text-decoration: none
286 }
287div.tres a:hover {
288 border-right: #ff0 2px solid; border-top: #ff0 2px solid; border-left: #ff0 2px solid; color: #000; border-bottom: #ff0 2px solid; background-color: #ff0
289 }
290div.tres a:active {
291 border-right: #ff0 2px solid; border-top: #ff0 2px solid; border-left: #ff0 2px solid; color: #000; border-bottom: #ff0 2px solid; background-color: #ff0
292 }
293div.tres span.current {
294 border-right: #fff 2px solid; padding-right: 5px; border-top: #fff 2px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #fff 2px solid; color: #000; padding-top: 2px; border-bottom: #fff 2px solid
295 }
296div.tres span.disabled {
297 display: none
298 }
299300301302/*css megas512 style pagination*/303304div.megas512 {
305 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
306 }
307div.megas512 a {
308 border-right: #dedfde 1px solid; padding-right: 6px; background-position: 50% bottom; border-top: #dedfde 1px solid; padding-left: 6px; padding-bottom: 2px; border-left: #dedfde 1px solid; color: #99210b; margin-right: 3px; padding-top: 2px; border-bottom: #dedfde 1px solid; text-decoration: none
309 }
310div.megas512 a:hover {
311 border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #777777
312 }
313div.megas512 a:active {
314 border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #777777
315 }
316div.megas512 span.current {
317 padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #99210b; margin-right: 3px; padding-top: 2px
318 }
319div.megas512 span.disabled {
320 padding-right: 6px; padding-left: 6px; padding-bottom: 2px; color: #adaaad; margin-right: 3px; padding-top: 2px
321 }
322323324325/*css technorati style pagination*/326327div.technorati {
328 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
329 }
330div.technorati a {
331 border-right: #ccc 1px solid; padding-right: 6px; background-position: 50% bottom; border-top: #ccc 1px solid; padding-left: 6px; font-weight: bold; padding-bottom: 2px; border-left: #ccc 1px solid; color: rgb(66,97,222); margin-right: 3px; padding-top: 2px; border-bottom: #ccc 1px solid; text-decoration: none
332 }
333div.technorati a:hover {
334 background-image: none; color: #fff; background-color: #4261df
335 }
336div.technorati a:active {
337 background-image: none; color: #fff; background-color: #4261df
338 }
339div.technorati span.current {
340 padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #000; margin-right: 3px; padding-top: 2px
341 }
342div.technorati span.disabled {
343 display: none
344 }
345346347348/*css youtube style pagination*/349350div.youtube {
351 padding-right: 6px; border-top: #9c9a9c 1px dotted; padding-left: 0px; font-size: 13px; padding-bottom: 4px; color: #313031; padding-top: 4px; font-family: arial, helvetica, sans-serif; background-color: #cecfce; text-align: right
352 }
353div.youtube a {
354 padding-right: 3px; padding-left: 3px; font-weight: bold; padding-bottom: 1px; margin: 0px 1px; color: #0030ce; padding-top: 1px; text-decoration: underline
355 }
356div.youtube a:hover {
357358 }
359div.youtube a:active {
360361 }
362div.youtube span.current {
363 padding-right: 2px; padding-left: 2px; padding-bottom: 1px; color: #000; padding-top: 1px; background-color: #fff
364 }
365div.youtube span.disabled {
366 display: none
367 }
368369370371372/*css msdn style pagination*/373374div.msdn {
375 padding-right: 6px; padding-left: 0px; font-size: 13px; padding-bottom: 4px; color: #313031; padding-top: 4px; font-family: verdana,tahoma,arial,helvetica,sans-serif; background-color: #fff; text-align: right
376 }
377div.msdn a {
378 border-right: #b7d8ee 1px solid; padding-right: 6px; border-top: #b7d8ee 1px solid; padding-left: 5px; padding-bottom: 4px; margin: 0px 3px; border-left: #b7d8ee 1px solid; color: #0030ce; padding-top: 5px; border-bottom: #b7d8ee 1px solid; text-decoration: none
379 }
380div.msdn a:hover {
381 border-right: #b7d8ee 1px solid; border-top: #b7d8ee 1px solid; border-left: #b7d8ee 1px solid; color: #0066a7; border-bottom: #b7d8ee 1px solid; background-color: #d2eaf6
382 }
383div.pagination a:active {
384 border-right: #b7d8ee 1px solid; border-top: #b7d8ee 1px solid; border-left: #b7d8ee 1px solid; color: #0066a7; border-bottom: #b7d8ee 1px solid; background-color: #d2eaf6
385 }
386div.msdn span.current {
387 border-right: #b7d8ee 1px solid; padding-right: 6px; border-top: #b7d8ee 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 4px; margin: 0px 3px; border-left: #b7d8ee 1px solid; color: #444444; padding-top: 5px; border-bottom: #b7d8ee 1px solid; background-color: #d2eaf6
388 }
389div.msdn span.disabled {
390 display: none
391 }
392393394395396/*css badoo style pagination*/397398div.badoo {
399 padding-right: 0px; padding-left: 0px; font-size: 13px; padding-bottom: 10px; color: #48b9ef; padding-top: 10px; font-family: arial, helvetica, sans-serif; background-color: #fff; text-align: center
400 }
401div.badoo a {
402 border-right: #f0f0f0 2px solid; padding-right: 5px; border-top: #f0f0f0 2px solid; padding-left: 5px; padding-bottom: 2px; margin: 0px 2px; border-left: #f0f0f0 2px solid; color: #48b9ef; padding-top: 2px; border-bottom: #f0f0f0 2px solid; text-decoration: none
403 }
404div.badoo a:hover {
405 border-right: #ff5a00 2px solid; border-top: #ff5a00 2px solid; border-left: #ff5a00 2px solid; color: #ff5a00; border-bottom: #ff5a00 2px solid
406 }
407div.badoo a:active {
408 border-right: #ff5a00 2px solid; border-top: #ff5a00 2px solid; border-left: #ff5a00 2px solid; color: #ff5a00; border-bottom: #ff5a00 2px solid
409 }
410div.badoo span.current {
411 border-right: #ff5a00 2px solid; padding-right: 5px; border-top: #ff5a00 2px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ff5a00 2px solid; color: #fff; padding-top: 2px; border-bottom: #ff5a00 2px solid; background-color: #ff6c16
412 }
413div.badoo span.disabled {
414 display: none
415 }
416417418419420421/*css manu style pagination*/422423.manu {
424 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
425 }
426.manu a {
427 border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #036cb4; padding-top: 2px; border-bottom: #eee 1px solid; text-decoration: none
428 }
429.manu a:hover {
430 border-right: #999 1px solid; border-top: #999 1px solid; border-left: #999 1px solid; color: #666; border-bottom: #999 1px solid
431 }
432.manu a:active {
433 border-right: #999 1px solid; border-top: #999 1px solid; border-left: #999 1px solid; color: #666; border-bottom: #999 1px solid
434 }
435.manu .current {
436 border-right: #036cb4 1px solid; padding-right: 5px; border-top: #036cb4 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #036cb4 1px solid; color: #fff; padding-top: 2px; border-bottom: #036cb4 1px solid; background-color: #036cb4
437 }
438.manu .disabled {
439 border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid
440 }
441442/*css viciao style pagination*/443444div.viciao {
445 margin-top: 20px; margin-bottom: 10px
446 }
447div.viciao a {
448 border-right: #8db5d7 1px solid; padding-right: 5px; border-top: #8db5d7 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #8db5d7 1px solid; color: #000; margin-right: 2px; padding-top: 2px; border-bottom: #8db5d7 1px solid; text-decoration: none
449 }
450div.viciao a:hover {
451 border-right: red 1px solid; padding-right: 5px; border-top: red 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: red 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: red 1px solid
452 }
453div.viciao a:active {
454 border-right: red 1px solid; padding-right: 5px; border-top: red 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: red 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: red 1px solid
455 }
456div.viciao span.current {
457 border-right: #e89954 1px solid; padding-right: 5px; border-top: #e89954 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #e89954 1px solid; color: #000; margin-right: 2px; padding-top: 2px; border-bottom: #e89954 1px solid; background-color: #ffca7d
458 }
459div.viciao span.disabled {
460 border-right: #ccc 1px solid; padding-right: 5px; border-top: #ccc 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #ccc 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #ccc 1px solid
461 }
462463464465466467/*css yahoo2 style pagination*/468469div.yahoo2 {
470 padding-right: 3px; padding-left: 3px; font-size: 0.85em; padding-bottom: 3px; margin: 3px; padding-top: 3px; font-family: tahoma,helvetica,sans-serif; text-align: center
471 }
472div.yahoo2 a {
473 border-right: #ccdbe4 1px solid; padding-right: 8px; background-position: 50% bottom; border-top: #ccdbe4 1px solid; padding-left: 8px; padding-bottom: 2px; border-left: #ccdbe4 1px solid; color: #0061de; margin-right: 3px; padding-top: 2px; border-bottom: #ccdbe4 1px solid; text-decoration: none
474 }
475div.yahoo2 a:hover {
476 border-right: #2b55af 1px solid; border-top: #2b55af 1px solid; background-image: none; border-left: #2b55af 1px solid; color: #fff; border-bottom: #2b55af 1px solid; background-color: #3666d4
477 }
478div.yahoo2 a:active {
479 border-right: #2b55af 1px solid; border-top: #2b55af 1px solid; background-image: none; border-left: #2b55af 1px solid; color: #fff; border-bottom: #2b55af 1px solid; background-color: #3666d4
480 }
481div.yahoo2 span.current {
482 padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #000; margin-right: 3px; padding-top: 2px
483 }
484div.yahoo2 span.disabled {
485 display: none
486 }
487488div.yahoo2 a.next {
489 border-right: #ccdbe4 2px solid; border-top: #ccdbe4 2px solid; margin: 0px 0px 0px 10px; border-left: #ccdbe4 2px solid; border-bottom: #ccdbe4 2px solid
490 }
491div.yahoo2 a.next:hover {
492 border-right: #2b55af 2px solid; border-top: #2b55af 2px solid; border-left: #2b55af 2px solid; border-bottom: #2b55af 2px solid
493 }
494div.yahoo2 a.prev {
495 border-right: #ccdbe4 2px solid; border-top: #ccdbe4 2px solid; margin: 0px 10px 0px 0px; border-left: #ccdbe4 2px solid; border-bottom: #ccdbe4 2px solid
496 }
497div.yahoo2 a.prev:hover {
498 border-right: #2b55af 2px solid; border-top: #2b55af 2px solid; border-left: #2b55af 2px solid; border-bottom: #2b55af 2px solid
499 }
500/*css sabrosus style pagination*/501502div.sabrosus {
503 padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
504 }
505div.sabrosus a {
506 border-right: #9aafe5 1px solid; padding-right: 5px; border-top: #9aafe5 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #9aafe5 1px solid; color: #2e6ab1; margin-right: 2px; padding-top: 2px; border-bottom: #9aafe5 1px solid; text-decoration: none
507 }
508div.sabrosus a:hover {
509 border-right: #2b66a5 1px solid; border-top: #2b66a5 1px solid; border-left: #2b66a5 1px solid; color: #000; border-bottom: #2b66a5 1px solid; background-color: lightyellow
510 }
511div.pagination a:active {
512 border-right: #2b66a5 1px solid; border-top: #2b66a5 1px solid; border-left: #2b66a5 1px solid; color: #000; border-bottom: #2b66a5 1px solid; background-color: lightyellow
513 }
514div.sabrosus span.current {
515 border-right: navy 1px solid; padding-right: 5px; border-top: navy 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: navy 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: navy 1px solid; background-color: #2e6ab1
516 }
517div.sabrosus span.disabled {
518 border-right: #929292 1px solid; padding-right: 5px; border-top: #929292 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #929292 1px solid; color: #929292; margin-right: 2px; padding-top: 2px; border-bottom: #929292 1px solid
519 }
【前端代码部分】
1
<
script
src
="../js/jquery.pagination.js"
type
="text/javascript"
></
script
>
2
<
link
href
="../css/pagination.css"
rel
="stylesheet"
type
="text/css"
/>
3
<
script
type
="text/javascript"
>
4
$(
function
() {
5
function
pageselectCallback(page_id, jq) {
6
//
alert(page_id); 回调函数，进一步使用请参阅说明文档
7
}
8
$(
"
#Pagination
"
).pagination(
<%=
pcount
%>
, {
9
callback: pageselectCallback,
//
PageCallback() 为翻页调用次函数。
10
prev_text:
"
上一页
"
,
11
next_text:
"
下一页
"
,
12
items_per_page:
<%=
pagesize
%>
,
//
每页的数据个数
13
num_display_entries:
3
,
//
两侧首尾分页条目数
14
current_page:
<%=
page
%>
,
//
当前页码
15
num_edge_entries:
2
,
//
连续分页主体部分分页条目数
16
link_to:
"
?page=__id__
"
17
});
18
InterlacesColor();
//
隔行换色(这个不是分页里面的js方法)
19
});
20
21
</
script
>
22
23
<
asp:Repeater
ID
="Rpt_UserList"
runat
="server"
>
24
<
ItemTemplate
>
25
<
tr
>
26
27
<
td
>
28
<%
#
Eval
(
"
UserName
"
)
%>
29
</
td
>
30
</
tr
>
31
<
ItemTemplate
>
32
</
asp:Repeater
>
33
34
<
div
id
="Pagination"
class
="right flickr"
></
div
>
原文：http://www.cnblogs.com/suanshun/p/4968770.html
内容总结
以上是互联网集市为您收集整理的pagination jquery最简单的分页【无刷新和刷新都通用】全部内容，希望文章能够帮你解决pagination jquery最简单的分页【无刷新和刷新都通用】所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】