r1010 - in branches/dev/grid: themes/default ui
Author: paul.bakaus
Date: Tue Nov 25 06:39:04 2008
New Revision: 1010
Modified:
branches/dev/grid/themes/default/ui.all.css
branches/dev/grid/ui/ui.grid.js
Log:
grid: implemented pagination with elliptical display
Modified: branches/dev/grid/themes/default/ui.all.css
==============================================================================
--- branches/dev/grid/themes/default/ui.all.css (original)
+++ branches/dev/grid/themes/default/ui.all.css Tue Nov 25 06:39:04 2008
@@ -447,6 +447,17 @@
color: #212121 !important;
}
+.ui-grid-pagination {
+ margin-right: 2px;
+ margin-left: 2px;
+}
+
+.ui-grid-pagination-current {
+ margin-right: 2px;
+ margin-left: 2px;
+ font-weight: bold;
+}
+
/*
Generic ThemeRoller Classes
Modified: branches/dev/grid/ui/ui.grid.js
==============================================================================
--- branches/dev/grid/ui/ui.grid.js (original)
+++ branches/dev/grid/ui/ui.grid.js Tue Nov 25 06:39:04 2008
@@ -17,10 +17,50 @@
'<div class="ui-grid-footer-text ui-grid-limits"></div>'+
'</td></tr>').appendTo(this.grid).find('td');
},
+
+ _generatePagination: function(response) {
+ this.pagination = $('<div
class="ui-grid-footer-text"></div>').appendTo(this.footer);
+ var pages = Math.round(response.totalRecords/this.options.limit);
+ this._updatePagination(response);
+ },
+
+ _updatePagination: function(response) {
+
+ var pages = Math.round(response.totalRecords/this.options.limit),
+ current = Math.round(this.offset / this.options.limit) + 1,
+ displayed = [];
+
+ this.pagination.empty();
+
+ for (var i=current-1; i > 0 && i > current-3; i--) {
+ this.pagination.prepend('<a href="#"
class="ui-grid-pagination">'+i+'</a>');
+ displayed.push(i);
+ };
+
+ for (var i=current; i < current+3; i++) {
+ this.pagination.append(i==current? '<span
class="ui-grid-pagination-current">'+i+'</span>' : '<a href="#"
class="ui-grid-pagination">'+i+'</a>' );
+ displayed.push(i);
+ };
+
+
+ if(pages > 1 && $.inArray(2, displayed) == -1) //Show front dots if
the '2' is not already displayed and there are more pages than 1
+ this.pagination.prepend('<span
class="ui-grid-pagination-dots">...</span>');
+
+ if($.inArray(1, displayed) == -1) //Show the '1' if it's not already
shown
+ this.pagination.prepend('<a href="#" class="ui-grid-pagination">1</a>');
+
+ if($.inArray(pages-1, displayed) == -1) //Show the dots between the
current elipse and the last if the one before last is not shown
+ this.pagination.append('<span
class="ui-grid-pagination-dots">...</span>');
+
+ if($.inArray(pages, displayed) == -1) //Show the last if it's not
already shown
+ this.pagination.append('<a href="#"
class="ui-grid-pagination">'+pages+'</a>');
+
+ },
_init: function() {
var self = this;
+ this.offset = 0;
//Generate the grid element
this.grid = $('<table class="ui-grid ui-component ui-component-content"
cellpadding="0" cellspacing="0" width="100%" height="100%"></table>')
@@ -43,7 +83,6 @@
this._generateFooter();
-
//Prepare data
this.gridmodel = $.ui.grid.model({
url: this.options.url
@@ -70,6 +109,11 @@
this.sortColumn = data.id;
this._update({ columns: false });
}
+
+ if($(event.target).is('.ui-grid-pagination')) {
+ this.offset = (parseInt(event.target.innerHTML,10)-1) *
this.options.limit;
+ this._update();
+ }
},
@@ -106,6 +150,13 @@
if(this.sortDirection) options.sortDirection = this.sortDirection;
this.gridmodel.fetch(options, function(response) {
+
+ //Generate pagination
+ if(self.options.pagination && !self.pagination) {
+ self._generatePagination(response);
+ } else if(self.options.pagination && self.pagination) {
+ self._updatePagination(response);
+ }
if(o && o.columns) {
self.content.empty();