tTable.js - work with tables like a boss.

Install & Use




Demos:

Data driven table
AJAX driven table
AJAX/page driven table

Data driven table means that you've already have a data that you should pass to your table and it should works. So u just create you table config (titles, data, etc..) and everything should work.


Show JavaScript code
 // Defining new data driven table
var table_id = new tTable( {
	titles : [
		{ "title": "Project", "type" : "string" },
		{ "title": "Link", "type" : "string" },
		{ "title": "Type", "type" : "string" }
	],
	page_size : 2,
	page_sizes : [2, 3, 4, 5, 6, 7],
	start_page : 1,
	row_numbers : true,
	sort_by : 1,
	sorting : true,
	data : [
		["DevMate", "<a href='http://devmate.com'>DevMate</a>", "work" ],
		["TjRus.com", "<a href='http://tjrus.com'>TjRus.com</a>", "personal"],
		// ... other rows
	],
	search : true,
	search_auto : true,
	search_container : "#table_id_search",
	search_sensitive : true,
	search_value : "",
	container : "#table_id",
	pager : "#table_id_pager",
	hover_cols : [1, 2],
	formatter:  {
		"3": function ( value ){
			return value == 'work' || value == 'opensource' ? '<b>' + value + '</b>' : value;
		}
	}
} );

AJAX Data driven table means that at the moment of table creation you don't have your data for table, and all the data will be get with AJAX request once. You only need to configure your ajax settings. You can specify them as simple jQuery ajax options in ajax property. There is only two important ajax properties on this step:

ajax: {
	url: 'your_ajax_url.php?maybe=with&some=params', // url should be string
	prepare_data : function ( response ){ // prepare your data for tTable
		// response here is what your backend will return in AJAX request
		// you should prepare your data array in proper format for tTable.js
		return data;
	}
}

Show JavaScript code
// AJAX data driven table
var ajax_table_id = new tTable( {
	container : '#ajax_table_id',
	pager : '#ajax_table_id_pager',
	titles : [
		{ "title": "Project", "type": "string", "key": "name" },
		{ "title": "Link", "type": "string", "key": "link" },
		{ "title": "Type", "type": "string", "key": "type" }
	],
	page_sizes : [2, 3, 4, 5, 6, 7],
	page_size : 2,
	start_page : 1,
	sorting : [1, 3],
	row_numbers : true,
	formatter : {
		"3" : function ( value ){
			return value == 'work' || value == 'opensource' ? '' + value + '' : value;
		}
	},
	ajax : {
		dataType : 'json',
		url : 'php/ajax.php',
		prepare_data : function ( response ){
			return _.map( response.data, function ( item ){
				return _.toArray( item );
			} );
		}
	},
	search : true,
	search_auto : false,
	search_container : "#ajax_table_id_search",
	search_sensitive : false,
	search_value : ""
} );

AJAX per page data driven table means that at the moment of table creation you don't have your data for table, and the data for current page will be get with AJAX request. You only need to configure your ajax settings. You can specify them as simple jQuery ajax options in ajax property. There is only three important ajax properties on this step:

ajax: {
	// url property should be function, that returns an url for getting specified page data.
	url : function ( from, limit, sort_by, sort_type, search, sensitive ){
		return 'php/ajax.php?limit=' + from + ',' + limit + '&sort_by=' + sort_by + '&sort_type=' + sort_type + '&search=' + search + '&sensitive=' + sensitive;
	},
	prepare_data : function ( response ){
		// response here is what your backend will return in AJAX request
		// you should prepare your data array in proper format for tTable.js
		return data;
	},
	full_size : function ( response ){
		// you should place information of your full table data size somewhere in your response and return in in this function
		return response.count;
	}
}

Show JavaScript code
// AJAX per page data driven table
var ajax_per_page_table_id = new tTable( {
		container : '#ajax_per_page_table_id',
		pager : '#ajax_per_page_table_id_pager',
		titles : [
			{ "title": "Project", "type": "string", "key": "name" },
			{ "title": "Link", "type": "string", "key": "link" },
			{ "title": "Type", "type": "string", "key": "type" }
		],
		page_sizes : [2, 3, 4, 5, 6, 7],
		page_size : 2,
		start_page : 1,
		sorting : [1, 3],
		row_numbers : true,
		formatter : {
			"3" : function ( value ){
				return value == 'work' || value == 'opensource' ? '' + value + '' : value;
			}
		},
		ajax : {
			dataType : 'json',
			url : function ( from, limit, sort_by, sort_type, search, sensitive ){
				return 'php/ajax.php?limit=' + from + ',' + limit + '&sort_by=' + sort_by + '&sort_type=' + sort_type + '&search=' + search + '&sensitive=' + sensitive;
			},
			prepare_data : function ( response ){
				return _.map( response.data, function ( item ){
					return _.toArray( item );
				} );
			},
			full_size : function ( response ){
				return response.count;
			}
		},
		search : true,
		search_auto : false,
		search_container : "#ajax_per_page_table_id_search",
		search_sensitive : false,
		search_value : ""
	} );



Documentation:

Config:

Config is an {Object} with tTable options for table displaying and control.

Here are available config properties:

Property name Type Default Description
container* String undefined String selector of DOM element in which table will be rendered.
(!) in jQuery style '#some_table_id'
titles* Array [ ] Array with table data structure. Each element of this array is an object with structure:
{
	title: 'Your column title',
	type: 'string', // available values - 'string', 'number'
	key: 'key_value' // only for AJAX per page driven table. This value will be sent via AJAX request as a sort column value.
}
data* Array [ ] Table data array. Each data array element is an array for table row. Each table row array element is a value for table cel.
row_numbers Boolean false Responsible for displaying row numbers or not.
pager String undefined Selector of DOM element in which pager will be rendered.
(!) in jQuery style '#some_table_id_pager'
page Number 1 Defines the table start page or page that should be rendered.
show_pages Boolean true Tell the script should it render table pagination or not.
page_size Number 10 Defines the table page size (how many rows will be displayed on the table page)
page_sizes Boolean, Array [10, 25, 50] Should script show page size selector or not.
  • false - page size selector wouldn't be displayed;
  • true - page size selector will be displayed in pager container with default page sizes;
  • [5, 7, ...] - page size selector will be displayed with select options that defined in this property
nav_arrows Boolean true Responsible for displaying navigation arrows.
goto Boolean true Responsible for displaying goto field.
sorting Boolean, Array true Defines column sorting.
  • true - enable sorting;
  • false - disable sorting;
  • [1,3,4 ... ] - enable sorting for defined columns;
sort_by number 0 Set the default column for data sorting.
sort_type string 'asc' Defines column sort type. Available values: 'asc''desc'
prefix object { } Defined column prefixes. Objects key should be column number in human readable format (starts from 1).
Example:
{
	"2": '$ ', // 2nd table column values will be displayed with '$ ' prefix
	"3": "+" // 3rd table column values will be displayed with '+' prefix
}
suffix object { } Defined column suffixes. Objects key should be column number in human readable format (starts from 1).
Example:
{
	"2": '%' // 2nd table column values will be displayed with '%' suffix
}
formatter object { } Object with functions for formatting table column data. Its properties should be column ids, and values - formatter function with value argument.
Example:
formatter: {
	"3": function( value ) {
		return value == 'work' || value == 'opensource' ? '<b>' + value + '</b>' : value;
	}
}
hover_cols boolean, array false Defines will table columns be highlighted on mouse over or not.
  • false - no column highlighting;
  • true - column highlighting for all columns except row numbers;
  • [1, 2] - column highlighting only for defined columns;
hidden_cols array [ ] Defines what columns will be hidden in table. You also should specify titles for hidden columns.
search_container string null Defines DOM element for search input element.
search boolean false Search functionality disabled or enabled.
search_auto boolean true Search will reacts on each changing of search query immediately. If false - search will be only on enter key press or lost focus from the search field.
search_sensitive boolean false Turn on/off search case sensitive mode.
search_value string "" Defines default search value.
ajax object null Special functionality for ajax driven tables. Detailed info you can find here - AJAX driven tables

Methods:

Method Returns Description
init() tTable Initialize tTable: insert table / pages / search to their containers, gett needed data and enable listening of proper table events.
destroy() tTable Destroy table - remove events and DOM objects.
get( what ) {*} Get tTable property value.
  • what - property name;
set( what ) tTable Update you table properties
  • what - object with properties and their values: { property : new_value, ....};
countPages() number Method that calculates available pages count for filtered and searched data.
dataSize() number Method that calculates and return table data size.
getData() array Method for getting table data (filtered, searched and cutted to page size). Or if we have ajax per page driven table - it will run AJAX request and then update table with new data;
getPageData() array Method for getting data array with table data related to current page.
searchData(data, search) array Method for searching data in table that can be associated with search string.
  • data - data in which we are searching for something;
  • search - search string;
getSortKey() string Method for getting sorting key. By default it will be column id in human readable format, but if developer defines `key` property in titles it will return that `key` value related to proper column id.
getSortType() string Method for getting sort_type string ('asc' or 'desc')
getSortDataType() string Method for finding sort data type ('string' or 'number') that defined in titles.
sortData( data, sort_by, sort_type ) array Method for sorting table rows (data) by defined column and sort_type ('asc', 'desc').
  • data - table data. If not defined - get it from the main table object;
  • sort_by - number of sort column;
  • sort_type - sort type ('asc', 'desc');
getTotal( column ) number Method that calculate total sum of table data in some defined column.
addRow( row ) tTable Method for adding row to the table.
  • row - array with row data. It will be concatenated with table data array and table will be automatically updated;
updateRow( update, where ) tTable Method for updating row(s) data
  • update - object with new update data for row(s). Update structure {col_id: 'value'}, col_id here relates to table column id in human readable format (starts with 1);
  • where - object with data that scripts need to find row that will be updated. Where structure {col_id: 'value'}, col_id here relates to table column id in human readable format (starts with 1);
At first scripts goes to data and searches for all rows that are relative to `where` config. Than it changes all relative to `update` data
delRow( where ) tTable Method for deleting row(s) form table data
  • where - object with data that scripts need to find row(s) that will be updated. Where structure {col_id: 'value'}, col_id here relates to table column id in human readable format (starts with 1);
goto( page ) tTable Method for updating viewport with table data related to defined page number
  • page - page that should be rendered;



comments powered by Disqus