/** jQuery Plugin Name: tableManager Version: 1.1.0 Author: Pietrantonio Alessandro (Stone) Author's website: http://www.stonewebdesign.it @-- What's new --@ 1) New classes to the table: tablePagination, tableFilterBy; 2) New class to the th element: disableFilterBy; 3) New option to disable filter on one or more column: disableFilterBy: [] @-- Usage --@ Important! This plugin NEED jQuery library to work. As a matter of fact it's a jQuery plugin. Minimum requirements: - jQuery library 1) To include jQuery library download it from jQuery site and put the .js file into your site folders, then put this line into your document: Alternatively you can include it without download it, just like this: 2) Include this plugin just like this: download it and put the .js file into your site folders, then write this line into your document: Important! REMEMBER: THIS LINE HAVE TO BE AFTER JQUERY INCLUDING LINE! If you want you can customize this plugin as you prefer and need just with the following options. Options: debug = (boolean) can be true or false or not set. It activates debug mode and show messages into browser console. firstSort = can be an array of integer, or just a single integer. The first parameter determines the number of column to start sorting, the second parameter determines the order (asc or 0 = ascending, desc or 1 = descending). Ex.: firstSort : [[1,'asc']] --> the table is sorted by first column (first parameter = 1), by ascending order (second parameter = 0). disable = this option is used to disable one or more columns and expect one parameter per column. The parameter can be an integer or, to disable last column, -1 or the word "last". Ex.: disable : [3] --> disable sorting on third column appendFilterby = (boolean) used to add a filter on top of the table. The filter will be composed by one select to select by which column to filter and an input text to filter typing. Ex.: appendFilterby : true dateFormat = used to indicate column and dateformat. It helps to sort by date which is formatted like dd-mm-yyyy or mmddyyyy. The first parameter is the column, the second parameter is date format. Ex.: dateFormat : [[3, 'dd-mm-yyyy']] --> the third column is date and it's formatted like dd-mm-yyyy pagination = true or false or not set. It permits to paginate table and append controllers under the table. Ex.: pagination : true --> enable pagination tool showrows = you can append to table a select by which you can select number of rows to show. It must be an array of numbers. Ex.: showrows : [10,100,1000] --> you can choose to show 10, 100, 1000 rows vocabulary = used to translate labels. The following are accepted labels: voc_filter_by voc_type_here_filter disableFilterBy = used to disable filter by specific columns. It must be an array of numbers. To disable filter by last column you can use "last". Ex.: disableFilterBy: [1, "last"] --> it disable filter by first and last column Classes: (th) disableSort = disable that specific column disableFilterBy = disable filter for that specific column (table) tablePagination = append pagination elements to table tableFilterBy = append filter tool to table Data- attributes: data-tablemanager = 'disable' --> disable that specific column '{"dateFormat":"dd-mm-yyyy"}' --> this secific column represent a date with the forma tdd-mm-yyyy (Important! To pass correctly this data attribute the attribute value has to be written between '' and attribute single elements like dateFormat or mm-dd-yyyy between "") Important! Do not edit this plugin if you're not sure you're doing it right. The Author is not responsible for any malfunctions caused by the end User. **/ (function ($) { /* Initialize function */ $.fn.tablemanager = function (options = null) { /** Get common variables, parts of tables and others utilities **/ var Table = $(this), Heads = $(this).find("thead th"), tbody = $(this).find("tbody"), rows = $(this).find("tbody tr"), rlen = rows.length, arr = [], cells, clen; /** Options default values **/ var firstSort = [[0, 0]], dateColumn = [], dateFormat = [], disableFilterBy = []; /** Debug value true or false **/ var debug = false; var debug = options !== null && options.debug == true ? true : false; /** Set pagination true or false **/ var pagination = false; pagination = options !== null && options.pagination == true ? true : false; // default pagination variables var currentPage = 0; var numPerPage = pagination !== true && showrows_option !== true ? rows.length : 5; var numOfPages = options.numOfPages !== undefined && options.numOfPages > 0 ? options.numOfPages : 5; /** Set default show rows list or set if option is set **/ var showrows = [5, 10, 50]; showrows = options !== null && options.showrows != "" && typeof options.showrows !== undefined && options.showrows !== undefined ? options.showrows : showrows; /** Default labels translations **/ var voc_filter_by = "Filter by", voc_type_here_filter = "Type here to filter...", voc_show_rows = "Show rows"; /** Available options: **/ var availableOptions = new Array(); availableOptions = [ "debug", "firstSort", "disable", "appendFilterby", "dateFormat", "pagination", "showrows", "vocabulary", "disableFilterBy", "numOfPages" ]; // debug // make array form options object arrayOptions = $.map(options, function (value, index) { return [index]; }); for (i = 0; i < arrayOptions.length; i++) { // check if options are in available options array if (availableOptions.indexOf(arrayOptions[i]) === -1) { if (debug) { cLog( "Error! " + arrayOptions[i] + " is unavailable option." ); } } } /** Get options if set **/ if (options !== null) { /** Check options vocabulary **/ if ( options.vocabulary != "" && typeof options.vocabulary !== undefined && options.vocabulary !== undefined ) { // Check every single label voc_filter_by = options.vocabulary.voc_filter_by != "" && options.vocabulary.voc_filter_by !== undefined ? options.vocabulary.voc_filter_by : voc_filter_by; voc_type_here_filter = options.vocabulary.voc_type_here_filter != "" && options.vocabulary.voc_type_here_filter !== undefined ? options.vocabulary.voc_type_here_filter : voc_type_here_filter; voc_show_rows = options.vocabulary.voc_show_rows != "" && options.vocabulary.voc_show_rows !== undefined ? options.vocabulary.voc_show_rows : voc_show_rows; } /** Option disable **/ if ( options.disable != "" && typeof options.disable !== undefined && options.disable !== undefined ) { for (var i = 0; i < options.disable.length; i++) { // check if should be disabled last column col = options.disable[i] == -1 || options.disable[i] == "last" ? Heads.length : options.disable[i] == "first" ? 1 : options.disable[i]; Heads.eq(col - 1) .addClass("disableSort") .removeClass("sortingAsc") .removeClass("sortingDesc"); // debug if (isNaN(col - 1)) { if (debug) { cLog('Error! Check your "disable" option.'); } } } } /** Option select number of rows to show **/ var showrows_option = false; if ( options.showrows != "" && typeof options.showrows !== undefined && options.showrows !== undefined ) { showrows_option = true; // div num rows var numrowsDiv = '
'; // append div to choose num rows to show Table.before(numrowsDiv); // get show rows options and append select to its div for (i = 0; i < showrows.length; i++) { $("select#numrows").append( $("