/**
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(
$("