Most of you may know the popular posts on jquery and the use of it in SharePoint by Jan Tielens (he actually made a very nice post last day about the “search-as-you-type”. So jWuery can be used for good in SharePoint.
1: (function($) {
2: $.extend({
3: tablesorterPager: new function() {
4:
5: function updatePageDisplay(table) {
6: var c = table.config;
7: var paginghtml = '';
8:
9: var startoffset = Math.max(c.page - 1, 1);
10: var endoffset = Math.min(c.page + 3, c.totalPages);
11:
12: // hide paging controls if we only have one page
13: if (c.totalPages == 1) {
14: $(c.cssPageDisplay, c.container).hide();
15: }
16: else {
17: $(c.cssPageDisplay, c.container).show();
18: }
19:
20: // remove old event handlers
21: $(c.cssPageDisplay + ' a', c.container).unbind('click');
22:
23: for (var i = startoffset; i <= endoffset; i++) {
24: if (c.page + 1 == i) {
25: paginghtml += '<a href="#page' + i + '"><strong>'
+ i + '</strong></a>';
26: }
27: else {
28: paginghtml += '<a href="#page' + i + '">' + i +
'</a>';
29: }
30: }
31:
32: $(c.cssPageDisplay, c.container).html(paginghtml);
33:
34: if (c.page == 0) {
35: $(config.cssPrev, config.container).hide();
36: }
37: else {
38: $(config.cssPrev, config.container).show();
39: }
40:
41: if (c.page == c.totalPages - 1) {
42: $(config.cssNext, config.container).hide();
43: }
44: else {
45: $(config.cssNext, config.container).show();
46: }
47:
48: // set up click handlers
49: $(c.cssPageDisplay + ' a', c.container).click(function() {
50: var pageno = /#page(\d)/.exec(this.href)[1];
51:
52: table.config.page = pageno - 1; moveToPage(table);
53:
54: return false;
55: });
56: }
57:
58: function setPageSize(table, size) {
59: var c = table.config;
60: c.size = size;
61: c.totalPages = Math.ceil(c.totalRows / c.size);
62: c.pagerPositionSet = false;
63: moveToPage(table);
64: fixPosition(table);
65: }
66:
67: function fixPosition(table) {
68: var c = table.config;
69: if (!c.pagerPositionSet && c.positionFixed) {
70: var c = table.config, o = $(table);
71: if (o.offset) {
72: c.container.css({
73: top: o.offset().top + o.height() + 'px',
74: position: 'absolute'
75: });
76: }
77: c.pagerPositionSet = true;
78: }
79: }
80:
81: function moveToFirstPage(table) {
82: var c = table.config;
83: c.page = 0;
84: moveToPage(table);
85: }
86:
87: function moveToLastPage(table) {
88: var c = table.config;
89: c.page = (c.totalPages - 1);
90: moveToPage(table);
91: }
92:
93: function moveToNextPage(table) {
94: var c = table.config;
95: c.page++;
96: if (c.page >= (c.totalPages - 1)) {
97: c.page = (c.totalPages - 1);
98: }
99: moveToPage(table);
100: }
101:
102: function moveToPrevPage(table) {
103: var c = table.config;
104: c.page--;
105: if (c.page <= 0) {
106: c.page = 0;
107: }
108: moveToPage(table);
109: }
110:
111:
112: function moveToPage(table) {
113: var c = table.config;
114: if (c.page < 0 || c.page > (c.totalPages - 1)) {
115: c.page = 0;
116: }
117:
118: renderTable(table, c.rowsCopy);
119: }
120:
121: function renderTable(table, rows) {
122:
123: var c = table.config;
124: var l = rows.length;
125: var s = (c.page * c.size);
126: var e = (s + c.size);
127: if (e > rows.length) {
128: e = rows.length;
129: }
130:
131:
132: var tableBody = $(table.tBodies[0]);
133:
134: // clear the table body
135:
136: $.tablesorter.clearTableBody(table);
137:
138: for (var i = s; i < e; i++) {
139:
140: //tableBody.append(rows[i]);
141:
142: var o = rows[i];
143: var l = o.length;
144: for (var j = 0; j < l; j++) {
145:
146: tableBody[0].appendChild(o[j]);
147:
148: }
149: }
150:
151: fixPosition(table, tableBody);
152:
153: $(table).trigger("applyWidgets");
154:
155: if (c.page >= c.totalPages) {
156: moveToLastPage(table);
157: }
158:
159: updatePageDisplay(table);
160: }
161:
162: this.appender = function(table, rows) {
163:
164: var c = table.config;
165:
166: c.rowsCopy = rows;
167: c.totalRows = rows.length;
168: c.totalPages = Math.ceil(c.totalRows / c.size);
169:
170: renderTable(table, rows);
171: };
172:
173: this.defaults = {
174: size: 10,
175: offset: 0,
176: page: 0,
177: totalRows: 0,
178: totalPages: 0,
179: container: null,
180: cssNext: '.next',
181: cssPrev: '.previous',
182: cssFirst: '.first',
183: cssLast: '.last',
184: cssPageDisplay: '.pagedisplay',
185: cssPageSize: '.pagesize',
186: seperator: "/",
187: positionFixed: false,
188: appender: this.appender
189: };
190:
191: this.construct = function(settings) {
192:
193: return this.each(function() {
194:
195: config = $.extend(this.config, $.tablesorterPager.
defaults, settings);
196:
197: var table = this, pager = config.container;
198:
199: $(this).trigger("appendCache");
200:
201: //config.size = parseInt($(".pagesize",pager).val());
202:
203: /*$(config.cssFirst, pager).click(function() {
204: moveToFirstPage(table);
205: return false;
206: });*/
207: $(config.cssNext, pager).click(function() {
208: moveToNextPage(table);
209: return false;
210: });
211: $(config.cssPrev, pager).click(function() {
212: moveToPrevPage(table);
213: return false;
214: });
215: /*$(config.cssLast, pager).click(function() {
216: moveToLastPage(table);
217: return false;
218: });*/
219: /*$(config.cssPageSize,pager).change(function() {
220: setPageSize(table,parseInt($(this).val()));
221: return false;
222: });*/
223: });
224: };
225:
226: }
227: });
228: // extend plugin scope
229: $.fn.extend({
230: tablesorterPager: $.tablesorterPager.construct
231: });
232:
233: })(jQuery);
As you can see not much changed, just some minor modifications that will allow you to ignore the selectable page-size, options to jump to last / first page, ignoring the showing of the paging when there are no pages to show, and the use of a ‘sliding’ window showing the current page, 2 pages two the left and two pages to the right of it.
Using it will be easy: