From 4b699189edcae023bef1d691fcaf90ac4ad2cf33 Mon Sep 17 00:00:00 2001 From: Daniel Bimschas Date: Mon, 18 Nov 2013 17:02:27 +0100 Subject: [PATCH] More steps towards #72 (Reservations view: paging support): paging now available if tablesorter is not used (see #92) --- js/wisegui-node-table.js | 4 +- js/wisegui-table.js | 125 ++++++++++++++++++++++++++------------- js/wisegui.js | 14 +++-- 3 files changed, 97 insertions(+), 46 deletions(-) diff --git a/js/wisegui-node-table.js b/js/wisegui-node-table.js index 30cfebd..9ffebc3 100644 --- a/js/wisegui-node-table.js +++ b/js/wisegui-node-table.js @@ -118,7 +118,9 @@ WiseGuiNodeTable.prototype.generateTable = function () { null, this.showCheckboxes, this.showFilter, - { sortColumn : 1 } + { + sortColumn : 1 + } ); // This vars store the predefined filters diff --git a/js/wisegui-table.js b/js/wisegui-table.js index b8c63ae..109af8c 100644 --- a/js/wisegui-table.js +++ b/js/wisegui-table.js @@ -18,23 +18,32 @@ var WiseGuiTableElem = function (data) { */ var WiseGuiTable = function (model, headers, rowProducer, preFilterFun, preSelectFun, showCheckBoxes, showFilterBox, options) { - this.model = model; - this.headers = headers; - this.rowProducer = rowProducer; - this.preFilterFun = preFilterFun; - this.preSelectFun = preSelectFun; - this.showCheckBoxes = showCheckBoxes; - this.options = options; - - this.html = $("
"); - this.table = null; - this.filter = null; - this.data = []; + this.model = model; + this.headers = headers; + this.rowProducer = rowProducer; + this.preFilterFun = preFilterFun; + this.preSelectFun = preSelectFun; + this.showCheckBoxes = showCheckBoxes; + this.options = options; + + this.pagination = this.options && this.options['pagination']; + this.paginationOffset = this.options['paginationOffset'] !== undefined ? this.options['paginationOffset'] : 0; + this.paginationAmount = this.options['paginationAmount'] !== undefined ? this.options['paginationAmount'] : 10; + + this.sortColumn = this.options && this.options['sortColumn'] !== undefined ? this.options['sortColumn'] : undefined; + this.sortOptions = this.showCheckBoxes ? + { sortList : [[this.options['sortColumn'] + 1, 1]], headers : { 0 : {sorter : false}} } : + { sortList : [[this.options['sortColumn'] , 1]] }; + + this.html = $("
"); + this.table = null; + this.filter = null; + this.data = []; this.selectionListeners = []; - this.filterListeners = []; + this.filterListeners = []; - this.filter_input = null; - this.input_checkbox_th = null; + this.filter_input = null; + this.input_checkbox_th = null; if(showFilterBox) { this.lastWorkingFilterExpr = null; @@ -118,6 +127,7 @@ WiseGuiTable.prototype.generateFilter = function () { }; WiseGuiTable.prototype.generateTable = function () { + var that = this; // Prepare the WiseGuiTableElems @@ -170,14 +180,66 @@ WiseGuiTable.prototype.generateTable = function () { } ); - /* - * Generate the table body - */ - var tbody = $(''); + this.table.append(thead); + this.table.append($('')); + this.html.append(this.table); + + if (this.pagination) { + + this.paginationView = $( + '' + ); + var pages = Math.ceil(this.data.length / this.paginationAmount); + + for (var page=0; page'); + var a = $(''+(page+1)+''); + + this.paginationView.find('ul').append(li.append(a)); + var self = this; + + a.data('page', page); + a.click(function(e) { + e.preventDefault(); + self.gotoPage($(this).data('page')); + }); + } + + this.html.append(this.paginationView); + this.gotoPage(0); + + } else { + this.renderTableContents(); + } + + if (this.sortColumn !== undefined && this.data.length > 0) { + this.table.tablesorter(this.sortOptions); + } +}; - if(this.rowProducer != null) { +WiseGuiTable.prototype.gotoPage = function(page) { + this.paginationView.find('li').removeClass('active'); + this.paginationView.find('li[data-page="'+page+'"]').addClass('active'); + this.paginationOffset = page * (this.paginationAmount); + this.renderTableContents(); +}; + +WiseGuiTable.prototype.renderTableContents = function() { + + var tbody = this.table.find('tbody'); + tbody.empty(); + + if (this.rowProducer != null) { + + var offset = this.pagination ? this.paginationOffset : 0; + var amount = this.pagination ? this.paginationAmount : this.data.length; + var actualAmount = (offset + amount > this.data.length) ? this.data.length : (offset + amount); - for ( var i = 0; i < this.data.length; i++) { + for (var i = offset; i < actualAmount; i++) { var data = this.data[i].data; @@ -192,9 +254,9 @@ WiseGuiTable.prototype.generateTable = function () { var checkbox = $(''); checkbox.attr("name", i); checkbox.attr("urn", data.id); - checkbox.click(function(){ + checkbox.click(function() { var checked = $(this).is(':checked'); - that.callSelectionListeners(this.attributes["urn"].nodeValue,!checked); + that.callSelectionListeners(this.attributes["urn"].nodeValue, !checked); }); data.checkbox = checkbox; var td_checkbox = $(''); @@ -216,23 +278,6 @@ WiseGuiTable.prototype.generateTable = function () { var noDataMessage = this.options && this.options['noDataMessage'] ? this.options['noDataMessage'] : 'No data available.'; tbody.append($(''+noDataMessage+'')); } - - this.table.append(thead); - this.table.append(tbody); - this.html.append(this.table); - - if (this.options && this.options['sortColumn'] !== undefined && this.data.length > 0) { - if(this.showCheckBoxes) { - this.table.tablesorter({ - headers : { 0 : {sorter:false}}, - sortList : [[this.options['sortColumn']+1, 0]] - }); - } else { - this.table.tablesorter({ - sortList : [[this.options['sortColumn'], 0]] - }); - } - } }; WiseGuiTable.prototype.addSelectionListener = function (listener) { diff --git a/js/wisegui.js b/js/wisegui.js index 8e0154b..e7bb815 100644 --- a/js/wisegui.js +++ b/js/wisegui.js @@ -504,8 +504,10 @@ function buildPersonalReservationsTable(parent, reservations) { var showCheckBoxes = false; var showFilterBox = false; var options = { - 'noDataMessage' : 'No reservations found.' - } + noDataMessage : 'No reservations found.', + pagination : true, + paginationAmount : 10 + }; var table = new WiseGuiTable(model, headers, rowProducer, preFilterFun, preSelectFun, showCheckBoxes, showFilterBox, options); @@ -541,9 +543,11 @@ function buildReservationTableInternal(parent, reservations) { var showCheckBoxes = false; var showFilterBox = false; var options = { - noDataMessage : 'No reservations found.', - sortColumn : 0 - } + noDataMessage : 'No reservations found.', + sortColumn : 0, + pagination : true, + paginationAmount : 10 + }; var table = new WiseGuiTable(model, headers, rowProducer, preFilterFun, preSelectFun, showCheckBoxes, showFilterBox, options);