/*! * Responsive Tables v5.3.2 (http://gergeo.se/RWD-Table-Patterns) * This is an awesome solution for responsive tables with complex data. * Authors: Nadan Gergeo (www.blimp.se), Lucas Wiener & "Maggie Wachs (www.filamentgroup.com)" * Licensed under MIT (https://github.com/nadangergeo/RWD-Table-Patterns/blob/master/LICENSE-MIT) */ (function ($) { 'use strict'; // RESPONSIVE TABLE CLASS DEFINITION // ========================== var ResponsiveTable = function(element, options) { // console.time('init'); var that = this; this.options = options; this.$tableWrapper = null; //defined later in wrapTable this.$tableScrollWrapper = $(element); //defined later in wrapTable this.$table = $(element).find('.table'); if (this.$table.length > 1) { this.$table = this.$table.eq(1); } if(this.$table.length !== 1) { throw new Error('Exactly one table is expected in a .table-responsive div.'); } //apply pattern option as data-attribute, in case it was set via js this.$tableScrollWrapper.attr('data-pattern', this.options.pattern); //if the table doesn't have a unique id, give it one. //The id will be a random hexadecimal value, prefixed with id. //Used for triggers with displayAll button. this.id = this.$table.prop('id') || this.$tableScrollWrapper.prop('id') || 'id' + Math.random().toString(16).slice(2); this.$tableClone = null; //defined farther down this.$stickyTableHeader = null; //defined farther down //good to have - for easy access this.$thead = this.$table.find('thead'); this.$hdrCells = this.$thead.find("tr").first().find('th'); this.$bodyRows = this.$table.find('tbody, tfoot').find('tr'); //toolbar and buttons this.$btnToolbar = null; //defined farther down this.$dropdownGroup = null; //defined farther down this.$dropdownBtn = null; //defined farther down this.$dropdownContainer = null; //defined farther down this.$displayAllBtn = null; //defined farther down this.$focusGroup = null; //defined farther down this.$focusBtn = null; //defined farther down //misc this.displayAllTrigger = 'display-all-' + this.id + '.responsive-table'; this.idPrefix = this.id + '-col-'; this.headerColIndices = {}; this.headerRowIndices = {}; // Setup table // ------------------------- //wrap table this.wrapTable(); //create toolbar with buttons this.createButtonToolbar(); //Build header indices mapping (for colspans in header) this.buildHeaderCellIndices(); // Setup cells // ------------------------- //setup header this.setupTableHeader(); //setup standard cells this.setupBodyRows(); //create sticky table head if(this.options.stickyTableHeader){ this.createStickyTableHeader(); } // hide toggle button if the list is empty if(this.$dropdownContainer.is(':empty')){ this.$dropdownGroup.hide(); } // Event binding // ------------------------- // on orientchange, resize and displayAllBtn-click $(window).bind('orientationchange resize ' + this.displayAllTrigger, function(){ //update the inputs' checked status that.$dropdownContainer.find('input').trigger('updateCheck'); //update colspan and visibility of spanning cells $.proxy(that.updateSpanningCells(), that); }).trigger('resize'); // console.timeEnd('init'); }; ResponsiveTable.DEFAULTS = { pattern: 'priority-columns', stickyTableHeader: true, fixedNavbar: '.navbar-fixed-top', // Is there a fixed navbar? The stickyTableHeader needs to know about it! addDisplayAllBtn: false, // should it have a display-all button? addFocusBtn: true, // should it have a focus button? addDisplayBtn: true, // should it have a focus button? focusBtnIcon: 'glyphicon glyphicon-screenshot', mainContainer: window, i18n: { focus : 'Focus', display : 'Display', displayAll: 'Display all' } }; // Wrap table ResponsiveTable.prototype.wrapTable = function() { this.$tableScrollWrapper.wrap('
'); this.$tableWrapper = this.$tableScrollWrapper.parent(); }; // Create toolbar with buttons ResponsiveTable.prototype.createButtonToolbar = function() { var that = this; if ($('.btn-rwd-table').length) { $('.btn-rwd-table').remove(); } this.$btnToolbar = $('[data-responsive-table-toolbar="' + this.id + '"]').addClass('btn-toolbar'); if(this.$btnToolbar.length === 0) { this.$btnToolbar = $('
'); } this.$dropdownGroup = $('