pagination jquery最简单的分页【无刷新和刷新都通用】

参数说明

参数名	描述	参数值
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 }

javascript

【CSS部分】：

  1 div.digg {padding: 3px;  margin: 3px; text-align: center; font-family:Verdana; font-size:12px;}
  2 div.digg a {    border: #aaaadd 1px solid; padding:2px 5px; margin: 2px;  color: #000099; text-decoration: none}
  3 div.digg a:hover {border: #000099 1px solid; color: #000; }
  4 div.digg a:active {border: #000099 1px solid; color: #000; }
  5 div.digg span.current {border: #000099 1px solid; padding:2px 5px; font-weight: bold;  margin: 2px; color: #fff;background-color: #000099}
  6 div.digg span.disabled {    border: #eee 1px solid; padding:2px 5px; margin: 2px; color: #ddd; padding-top: 2px;}
  7 
  8 
  9 /*css meneame style pagination*/
 10 div.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 }
 13 div.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 }
 16 div.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 }
 19 div.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 }
 22 div.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 }
 25 div.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*/
 30 div.flickr {
 31     padding:0px;margin:0px; text-align:center; font-family:Verdana; font-size:12px;
 32 }
 33 div.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 }
 36 div.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 }
 39 div.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 }
 42 div.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 }
 45 div.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 
 51 div.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 }
 54 div.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 }
 57 div.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 }
 60 div.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 }
 63 div.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 }
 66 div.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 
 74 div.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 }
 77 div.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 }
 80 div.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 }
 83 div.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 }
 86 div.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 }
 89 div.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 
 97 div.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 }
100 div.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 }
103 div.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 }
106 div.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 }
109 div.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 }
112 div.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 }
115 
116 
117 
118 
119 /*css black2 style pagination*/
120 
121 div.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 }
124 div.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 }
127 div.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 }
130 div.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 }
133 div.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 }
136 div.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 }
139 
140 
141 
142 
143 /*css black-red style pagination*/
144 
145 div.black-red {
146     font-size: 11px; color: #fff; font-family: tahoma, arial, helvetica, sans-serif; background-color: #3e3e3e;
147 }
148 div.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 }
151 div.black-red a:hover {
152     color: #fff; background-color: #ec5210
153 }
154 div.black-red a:active {
155     color: #fff; background-color: #ec5210
156 }
157 div.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 }
160 div.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 }
163 
164 
165 /*css green-black style pagination*/
166 
167 div.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 }
170 div.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 }
173 div.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 }
176 div.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 }
179 div.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 }
182 div.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 }
185 
186 /*css grayr style pagination*/
187 
188 div.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 }
191 div.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 }
194 div.grayr a:hover {
195     color: #000; background-color: #99ffff
196 }
197 div.grayr a:active {
198     color: #000; background-color: #99ffff
199 }
200 div.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 }
203 div.grayr span.disabled {
204     padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #797979; padding-top: 2px; background-color: #c1c1c1
205 }
206 
207 
208 
209 
210 /*css yellow style pagination*/
211 
212 div.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 }
215 div.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 }
218 div.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 }
221 div.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 }
224 div.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 }
227 div.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 }
230 
231 
232 
233 /*css jogger style pagination*/
234 
235 div.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 }
238 div.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 }
241 div.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 }
244 div.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 }
247 div.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 }
250 div.jogger span.disabled {
251     display: none
252 }
253 
254 
255 
256 /*css starcraft2 style pagination*/
257 
258 div.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 }
261 div.starcraft2 a {
262     margin: 2px; color: #fa0; background-color: #000; text-decoration: none
263 }
264 div.starcraft2 a:hover {
265     color: #fff; background-color: #000
266 }
267 div.starcraft2 a:active {
268     color: #fff; background-color: #000
269 }
270 div.starcraft2 span.current {
271     font-weight: bold; margin: 2px; color: #fff; background-color: #000
272 }
273 div.starcraft2 span.disabled {
274     margin: 2px; color: #444; background-color: #000
275 }
276 
277 
278 
279 /*css tres style pagination*/
280 
281 div.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 }
284 div.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 }
287 div.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 }
290 div.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 }
293 div.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 }
296 div.tres span.disabled {
297     display: none
298 }
299 
300 
301 
302 /*css megas512 style pagination*/
303 
304 div.megas512 {
305     padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
306 }
307 div.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 }
310 div.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 }
313 div.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 }
316 div.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 }
319 div.megas512 span.disabled {
320     padding-right: 6px; padding-left: 6px; padding-bottom: 2px; color: #adaaad; margin-right: 3px; padding-top: 2px
321 }
322 
323 
324 
325 /*css technorati style pagination*/
326 
327 div.technorati {
328     padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
329 }
330 div.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 }
333 div.technorati a:hover {
334     background-image: none; color: #fff; background-color: #4261df
335 }
336 div.technorati a:active {
337     background-image: none; color: #fff; background-color: #4261df
338 }
339 div.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 }
342 div.technorati span.disabled {
343     display: none
344 }
345 
346 
347 
348 /*css youtube style pagination*/
349 
350 div.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 }
353 div.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 }
356 div.youtube a:hover {
357     
358 }
359 div.youtube a:active {
360     
361 }
362 div.youtube span.current {
363     padding-right: 2px; padding-left: 2px; padding-bottom: 1px; color: #000; padding-top: 1px; background-color: #fff
364 }
365 div.youtube span.disabled {
366     display: none
367 }
368 
369 
370 
371 
372 /*css msdn style pagination*/
373 
374 div.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 }
377 div.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 }
380 div.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 }
383 div.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 }
386 div.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 }
389 div.msdn span.disabled {
390     display: none
391 }
392 
393 
394 
395 
396 /*css badoo style pagination*/
397 
398 div.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 }
401 div.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 }
404 div.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 }
407 div.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 }
410 div.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 }
413 div.badoo span.disabled {
414     display: none
415 }
416 
417 
418 
419 
420 
421 /*css manu style pagination*/
422 
423 .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 }
441 
442 /*css viciao style pagination*/
443 
444 div.viciao {
445     margin-top: 20px; margin-bottom: 10px
446 }
447 div.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 }
450 div.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 }
453 div.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 }
456 div.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 }
459 div.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 }
462 
463 
464 
465 
466 
467 /*css yahoo2 style pagination*/
468 
469 div.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 }
472 div.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 }
475 div.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 }
478 div.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 }
481 div.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 }
484 div.yahoo2 span.disabled {
485     display: none
486 }
487 
488 div.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 }
491 div.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 }
494 div.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 }
497 div.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*/
501 
502 div.sabrosus {
503     padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
504 }
505 div.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 }
508 div.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 }
511 div.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 }
514 div.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 }
517 div.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 }

CSS

【前端代码部分】

 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>