Grid SPF: Improve pager control, better integrate in menugrid demo. Show current/total rows.

jzaefferer · jzaefferer · commit 3648b51c3256 · 2011-08-19T13:22:10.000+02:00
diff --git a/grid-spf/datasource.js b/grid-spf/datasource.js
@@ -65,7 +65,7 @@ $.widget( "ui.datasource", {
 		var that = this;
         this.options.source( request, function( data, totalCount ) {
 			that.data = data;
-			that.totalCount = totalCount;
+			that.totalCount = parseInt(totalCount, 10);
 			that._trigger( "response" );
 		});
         return this;
diff --git a/grid-spf/menugrid.html b/grid-spf/menugrid.html
@@ -24,7 +24,18 @@
 			resource: "http://odata.netflix.com/Catalog/Titles"
 		});
 		var grid = $( "#movies" ).grid({
-			source: movies
+			source: movies,
+			refresh: function() {
+				var paging = movies.options.paging,
+					total = movies.totalCount;
+				$(".paging-from").text( paging.offset + 1 );
+				var to = paging.offset + paging.limit + 1;
+				if (to > total) {
+					to = total;
+				}
+				$(".paging-to").text( to );
+				$(".paging-total").text( total );
+			}
 		}).menugrid();
 
 		$( "#pager" ).pager({
@@ -38,6 +49,9 @@
 	.ui-menu {
 		position: absolute;
 	}
+	tfoot td {
+		text-align: center;
+	}
 	</style>
 </head>
 <body>
@@ -64,20 +78,21 @@ <h2>Movies! Click header for sort menu, use inputs for filtering, pager for pagi
 	</thead>
 	<tbody>
 	</tbody>
+	<tfoot>
+		<tr>
+			<td id="pager" colspan="2" class="ui-state-default">
+				<button data-page="first">First</button>
+				<button data-page="prev">Prev</button>
+				<span>
+					Page <input class="current" size="4"/> of <span class="total">0</span>
+				</span>
+				<button data-page="next">Next</button>
+				<button data-page="last">Last</button>
+			</td>
+			<td class="ui-state-default">Viewing rows <span class="paging-from">0</span> to <span class="paging-to">0</span> of <span class="paging-total">0</span>
+		</tr>
+	</tfoot>
 </table>
 
-<p id="pager">
-	<button data-page="first">First</button>
-	<button data-page="prev">Prev</button>
-	<button data-page="prevStep">-1</button>
-	<span>
-		Page <input class="current" size="4"/>/<span class="total">0</span>,
-		Total records <span class="totalRecords">0</span>
-	</span>
-	<button data-page="nextStep">+1</button>
-	<button data-page="next">Next</button>
-	<button data-page="last">Last</button>
-</p>
-
 </body>
 </html>
diff --git a/grid-spf/pager.js b/grid-spf/pager.js
@@ -16,6 +16,12 @@ $.widget( "spf.pager", {
 			that.options.source.refresh();
 		}).buttonset().find("button");
 
+		// TODO refactor
+		this.buttons.filter('[data-page="first"]').button("option", "icons.primary", "ui-icon-seek-first");
+		this.buttons.filter('[data-page="prev"]').button("option", "icons.primary", "ui-icon-seek-prev");
+		this.buttons.filter('[data-page="next"]').button("option", "icons.secondary", "ui-icon-seek-next");
+		this.buttons.filter('[data-page="last"]').button("option", "icons.secondary", "ui-icon-seek-end");
+
 		this.element.find(".current").change(function() {
 			that.page( +$(this).val() );
 			that.options.source.refresh();
@@ -26,10 +32,10 @@ $.widget( "spf.pager", {
 
 		var source = this.options.source;
 		if (!source.options.paging.offset) {
-			this.buttons.slice(0, 3).button("disable")
+			this.buttons.filter('[data-page="first"], [data-page="prev"], [data-page="prevStep"]').button("disable");
 		}
 		if (source.options.paging.offset + source.options.paging.limit >= source.totalCount) {
-			this.buttons.slice(3, 6).button("disable")
+			this.buttons.filter('[data-page="last"], [data-page="next"], [data-page="nextStep"]').button("disable");
 		}
 		this.element.find(".current").val(this.page());
 		this.element.find(".total").text(this.totalPages());
