/* * FooTable v3 - FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome. * @version 3.0.6 * @link http://fooplugins.com * @copyright Steven Usher & Brad Vincent 2015 * @license Released under the GPLv3 license. */ (function($, F){ F.Pager = F.Class.extend(/** @lends FooTable.Pager */{ /** * The pager object contains the page number and direction to page to. * @constructs * @extends FooTable.Class * @param {number} total - The total number of pages available. * @param {number} current - The current page number. * @param {number} size - The number of rows per page. * @param {number} page - The page number to goto. * @param {boolean} forward - A boolean indicating the direction of paging, TRUE = forward, FALSE = back. * @returns {FooTable.Pager} */ construct: function(total, current, size, page, forward){ /** * The total number of pages available. * @type {number} */ this.total = total; /** * The current page number. * @type {number} */ this.current = current; /** * The number of rows per page. * @type {number} */ this.size = size; /** * The page number to goto. * @type {number} */ this.page = page; /** * A boolean indicating the direction of paging, TRUE = forward, FALSE = back. * @type {boolean} */ this.forward = forward; } }); })(jQuery, FooTable); (function($, F){ F.Paging = F.Component.extend(/** @lends FooTable.Paging */{ /** * The paging component adds a pagination control to the table allowing users to navigate table rows via pages. * @constructs * @extends FooTable.Component * @param {FooTable.Table} table - The parent {@link FooTable.Table} object for the component. * @returns {FooTable.Filtering} */ construct: function(table){ // call the base constructor this._super(table, table.o.paging.enabled); /* PROTECTED */ /** * An object containing the strings used by the paging buttons. * @type {{ first: string, prev: string, next: string, last: string }} */ this.strings = table.o.paging.strings; /* PUBLIC */ /** * The current page number to display. * @instance * @type {number} */ this.current = table.o.paging.current; /** * The number of rows to display per page. * @instance * @type {number} */ this.size = table.o.paging.size; /** * The maximum number of page links to display at once. * @type {number} */ this.limit = table.o.paging.limit; /** * The position of the pagination control within the paging rows cell. * @type {string} */ this.position = table.o.paging.position; /** * The format string used to generate the text displayed under the pagination control. * @type {string} */ this.countFormat = table.o.paging.countFormat; /** * The total number of pages. * @instance * @type {number} */ this.total = -1; /** * The jQuery row object that contains all the paging specific elements. * @instance * @type {jQuery} */ this.$row = null; /** * The jQuery cell object that contains the pagination control and total count. * @instance * @type {jQuery} */ this.$cell = null; /** * The jQuery object that contains the links for the pagination control. * @type {jQuery} */ this.$pagination = null; /** * The jQuery object that contains the row count. * @type {jQuery} */ this.$count = null; /* PRIVATE */ /** * A number indicating the previous page displayed. * @private * @type {number} */ this._previous = 1; /** * Used to hold the number of rows in the {@link FooTable.Rows#array} before paging is applied. * @type {number} * @private */ this._total = 0; }, /* PROTECTED */ /** * Checks the supplied data and options for the paging component. * @instance * @protected * @param {object} data - The jQuery data object from the parent table. * @fires FooTable.Paging#"preinit.ft.paging" */ preinit: function(data){ var self = this; /** * The preinit.ft.paging event is raised before the UI is created and provides the tables jQuery data object for additional options parsing. * Calling preventDefault on this event will disable the component. * @event FooTable.Paging#"preinit.ft.paging" * @param {jQuery.Event} e - The jQuery.Event object for the event. * @param {FooTable.Table} ft - The instance of the plugin raising the event. * @param {object} data - The jQuery data object of the table raising the event. */ this.ft.raise('preinit.ft.paging', [data]).then(function(){ if (self.ft.$el.hasClass('footable-paging')) self.enabled = true; self.enabled = F.is.boolean(data.paging) ? data.paging : self.enabled; if (!self.enabled) return; self.size = F.is.number(data.pagingSize) ? data.pagingSize : self.size; self.current = F.is.number(data.pagingCurrent) ? data.pagingCurrent : self.current; self.limit = F.is.number(data.pagingLimit) ? data.pagingLimit : self.limit; if (self.ft.$el.hasClass('footable-paging-left')) self.position = 'left'; if (self.ft.$el.hasClass('footable-paging-center')) self.position = 'center'; if (self.ft.$el.hasClass('footable-paging-right')) self.position = 'right'; self.position = F.is.string(data.pagingPosition) ? data.pagingPosition : self.position; self.countFormat = F.is.string(data.pagingCountFormat) ? data.pagingCountFormat : self.countFormat; self.total = Math.ceil(self.ft.rows.array.length / self.size); self._total = self.total; }, function(){ self.enabled = false; }); }, /** * Initializes the paging component for the plugin using the supplied table and options. * @instance * @protected * @fires FooTable.Paging#"init.ft.paging" */ init: function(){ /** * The init.ft.paging event is raised before its UI is generated. * Calling preventDefault on this event will disable the component. * @event FooTable.Paging#"init.ft.paging" * @param {jQuery.Event} e - The jQuery.Event object for the event. * @param {FooTable.Table} ft - The instance of the plugin raising the event. */ var self = this; this.ft.raise('init.ft.paging').then(function(){ self.$create(); }, function(){ self.enabled = false; }); }, /** * Destroys the paging component removing any UI generated from the table. * @instance * @protected * @fires FooTable.Paging#"destroy.ft.paging" */ destroy: function () { /** * The destroy.ft.paging event is raised before its UI is removed. * Calling preventDefault on this event will prevent the component from being destroyed. * @event FooTable.Paging#"destroy.ft.paging" * @param {jQuery.Event} e - The jQuery.Event object for the event. * @param {FooTable.Table} ft - The instance of the plugin raising the event. */ var self = this; this.ft.raise('destroy.ft.paging').then(function(){ self.ft.$el.removeClass('footable-paging') .find('tfoot > tr.footable-paging').remove(); }); }, /** * Performs the actual paging against the {@link FooTable.Rows#current} array removing all rows that are not on the current visible page. * @instance * @protected */ predraw: function(){ this.total = Math.ceil(this.ft.rows.array.length / this.size); this.current = this.current > this.total ? this.total : (this.current < 1 ? 1 : this.current); this._total = this.ft.rows.array.length; if (this.ft.rows.array.length > this.size) this.ft.rows.array = this.ft.rows.array.splice((this.current - 1) * this.size, this.size); }, /** * Updates the paging UI setting the state of the pagination control. * @instance * @protected */ draw: function(){ this.$cell.attr('colspan', this.ft.columns.visibleColspan); this._setVisible(this.current, this.current > this._previous); this._setNavigation(true); }, /** * Creates the paging UI from the current options setting the various jQuery properties of this component. * @instance * @protected */ $create: function(){ var self = this, multiple = self.total > 1, link = function(attr, html, klass){ return $('
  • ', { 'class': klass }).attr('data-page', attr) .append($('', { 'class': 'footable-page-link', href: '#' }).data('page', attr).html(html)); }, position; if (!multiple) return; switch (self.position){ case 'left': position = 'footable-paging-left'; break; case 'right': position = 'footable-paging-right'; break; default: position = 'footable-paging-center'; break; } self.ft.$el.addClass('footable-paging').addClass(position); self.$cell = $('').attr('colspan', self.ft.columns.visibleColspan); var $tfoot = self.ft.$el.children('tfoot'); if ($tfoot.length == 0){ $tfoot = $(''); self.ft.$el.append($tfoot); } self.$row = $('', { 'class': 'footable-paging' }).append(self.$cell).appendTo($tfoot); self.$pagination = $('