git clone https://github.com/TjRus/tTable.js
<link href="css/tTable.css" type="text/css" rel="stylesheet"/>
<script src="js/libs/jquery.min.js"></script>
<script src="js/libs/lodash.min.js"></script>
<script src="tTable.js"></script>
var my_table = new tTable( { /* table config */ } );
Table config details you can find in documentation below or in playground page.
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.
// 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;
}
}
// 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;
}
}
// 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 : ""
} );
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:
|
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.
|
nav_arrows | Boolean | true | Responsible for displaying navigation arrows. |
goto | Boolean | true | Responsible for displaying goto field. |
sorting | Boolean, Array | true |
Defines column sorting.
|
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:
|
suffix | object | { } |
Defined column suffixes. Objects key should be column number in human readable format (starts from 1). Example:
|
formatter | object | { } |
Object with functions for formatting table column data. Its properties should be column ids, and values - formatter function with value argument. Example:
|
hover_cols | boolean, array | false |
Defines will table columns be highlighted on mouse over or not.
|
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 |
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.
|
set( what ) | tTable |
Update you table properties
|
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.
|
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').
|
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.
|
updateRow( update, where ) | tTable |
Method for updating row(s) data
|
delRow( where ) | tTable |
Method for deleting row(s) form table data
|
goto( page ) | tTable |
Method for updating viewport with table data related to defined page number
|