Added page size controls to data table view.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@22 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-02-02 18:43:19 +00:00
parent d054cc709f
commit f3d9a7804e

View File

@ -18,9 +18,16 @@ DataTableView.prototype.render = function() {
'</span>' '</span>'
).appendTo(divSummary); ).appendTo(divSummary);
var pagingControls = $('<div></div>').addClass("viewPanel-pagingControls").appendTo(container); /*
var firstPage = $('<a href="javascript:{}">&laquo; first</a>').appendTo(pagingControls); * Paging controls
var previousPage = $('<a href="javascript:{}">&laquo; previous</a>').appendTo(pagingControls); */
var pagingControls = $('<table width="100%"><tr><td align="center"></td><td align="center"></td></tr></table>').addClass("viewPanel-pagingControls").appendTo(container);
var pagingControls0 = pagingControls[0].rows[0].cells[0];
var pagingControls1 = pagingControls[0].rows[0].cells[1];
var firstPage = $('<a href="javascript:{}">&laquo; first</a>').appendTo(pagingControls0);
var previousPage = $('<a href="javascript:{}">&laquo; previous</a>').appendTo(pagingControls0);
if (theProject.rowModel.start > 0) { if (theProject.rowModel.start > 0) {
firstPage.addClass("action").click(function(evt) { self._onClickFirstPage(this, evt); }); firstPage.addClass("action").click(function(evt) { self._onClickFirstPage(this, evt); });
previousPage.addClass("action").click(function(evt) { self._onClickPreviousPage(this, evt); }); previousPage.addClass("action").click(function(evt) { self._onClickPreviousPage(this, evt); });
@ -28,9 +35,9 @@ DataTableView.prototype.render = function() {
firstPage.addClass("inaction"); firstPage.addClass("inaction");
previousPage.addClass("inaction"); previousPage.addClass("inaction");
} }
$('<span> &bull; </span>').appendTo(pagingControls); $('<span> &bull; </span>').appendTo(pagingControls0);
var nextPage = $('<a href="javascript:{}">next page &raquo;</a>').appendTo(pagingControls); var nextPage = $('<a href="javascript:{}">next page &raquo;</a>').appendTo(pagingControls0);
var lastPage = $('<a href="javascript:{}">last &raquo;</a>').appendTo(pagingControls); var lastPage = $('<a href="javascript:{}">last &raquo;</a>').appendTo(pagingControls0);
if (theProject.rowModel.start + theProject.rowModel.limit < theProject.rowModel.filtered) { if (theProject.rowModel.start + theProject.rowModel.limit < theProject.rowModel.filtered) {
nextPage.addClass("action").click(function(evt) { self._onClickNextPage(this, evt); }); nextPage.addClass("action").click(function(evt) { self._onClickNextPage(this, evt); });
lastPage.addClass("action").click(function(evt) { self._onClickLastPage(this, evt); }); lastPage.addClass("action").click(function(evt) { self._onClickLastPage(this, evt); });
@ -39,6 +46,27 @@ DataTableView.prototype.render = function() {
lastPage.addClass("inaction"); lastPage.addClass("inaction");
} }
$('<span>page size: </span>').appendTo(pagingControls1);
var sizes = [ 5, 10, 15, 20, 25, 50 ];
var renderPageSize = function(index) {
var pageSize = sizes[index];
var a = $('<a href="javascript:{}"></a>').appendTo(pagingControls1)
if (pageSize == self._pageSize) {
a.text("[" + pageSize + "]").addClass("inaction");
} else {
a.text(pageSize).addClass("action").click(function(evt) {
self._pageSize = pageSize;
self.update(true);
});
}
};
for (var i = 0; i < sizes.length; i++) {
renderPageSize(i);
}
/*
* Data table
*/
var table = document.createElement("table"); var table = document.createElement("table");
table.className = "data-table"; table.className = "data-table";
container.append(table); container.append(table);