JS Tutorial
- Overview
- Documents
DTable is a data table plugin for jQuery. The plugin is highly customizable, It uses html template to generate the table and the whole plugin module based, so you can add new features easily.
It's a data table for jQuery. I made it to study grunt and it's first part of my Symfony 2 admin boundle. The plugin is highly customizable, It's uses html template to generate the table (it's not necessary to be a table, can be anything see "Custom template" example) and the whole plugin module based, so you can add new features easily.
How to use
$("#div").dtable({});
Evry module has its own options, you can see it in the modules list.
Options
{
definition: {
name: <module_name>, # default: "json_url"
options: <module_options>
},
template: {
name: <module_name>, # default: "nunjucks"
options: <module_options>
},
logger: {
name: <module_name>, # default: "default"
options: <module_options>
},
source: {
name: <module_name>, # default: "json_url"
options: <module_options>
},
search: {
name: <module_name>, # default: "default"
options: <module_options>
},
pagination: {
name: <module_name>, # default: "default"
options: <module_options>
},
loading: {
name: <module_name>, # default: "default"
options: <module_options>
},
order: {
name: <module_name>, # default: "default"
options: <module_options>
},
formatter: {
name: <module_name>, # default: "false"
options: <module_options>
}
}
Modules
Definition modules
Its used to get the table definition, most of the configs goes from here.
"json_url"
Load table definition from url. Request is sent with POST or GET and the response must be in json format.
options:
url: <string> # url to download the json data, default: ""
method: <"post"|"get"> # method for request, default: "get"
data: {} # extra data to send, default: {}
timestamp: <true|false> # if true, it will add timestamp to prevent caching the page
response json format
{
"title": <string||false>, # table title
"columns": {
<column_id>: {
"title": <false||string>, # table title, if false no column title displayed,
# its work if all column title is false
"filter": <false||true||{"placeholder": <string>}>, # column filter, placeholder: input field placeholder
"order": <false||true>, # column order enable/disable
"html_tag_attr": <false||{ # html attr for column header
<attr_name>: <attr_value>
}>,
// not required, used by formatter module
"formatter": <formatter module specified options> # here you can set column option for formatter
}
}
}
Template modules
Its used to renderer the template. There are 3 different template: table, rows, pagination.
"nunjucks"
Requires Nunjucks to render the table. Its loading the template from the view_dir.
options
view_dir: <string> # url pointing to the view dir, default: "/view"
table_template: <string> # table template filename, default: "table.html"
rows_template: <string> # rows template filename, default: "rows.html"
pagination_template: <string> # pagination template filename, default: "pagination.html"
Logger modules
It's used to log errors/dev informations.
"default"
options
debug: <true||false> # in debug mode debug information logged to the console
Source modules (data source)
Its used to get the table rows.
"json_url"
It will send the query string (built with search module) to the url, its require a json response.
options
url: <string> # url to put query paramters, default: ""
method: <"post"|"get"> # method to use, default: "post"
query parameters
search: <string>,
filter: "" || {
<column_id>: <filter_text>,
...
},
per_page: <int>,
offset: <int>,
order: "" || { # currently only one order by column supported, but its possible to have more than one
<column_id>: "asc"||"desc",
...
}
response json format
[
{
<col_id> : <value>,
....
},
....
]
Search modules
Its used to create query string (see source modules, query parameters), and initiate table refresh. Its handle the search and filter fields.
"default"
placeholder: # serch input field placeholder, default: "search...",
waiting: <int> # time in ms to wait after last modification in search
# paramters before submitting, default: 600
Pagination modules
Its used to handle pagination related tasks.
"default"
options
show_first_and_last: <boolean> # in pager, first and last page shown? default: true
pages: <int> # how many page in the pager, odd number, default: 5
rows_per_page: <int> # results per page, default: 20
rows_per_page_select: [<int>, ...] # rows per page select, default: [20, 50, 100]
Loading modules
Show loading message when the table refresh.
"default"
There is no options. It's uses html tag with data-dtable="loading" attr to show in the table header. If you want to make other loading indicator, pleas create one and make a pull request.
Formatter modules
This modules used to format cells, you can add formatter options to column definition, available options is depend on formatter.
