https://github.com/gregmolnar/dtable
jQuery data table plugin
https://github.com/gregmolnar/dtable
Last synced: about 1 year ago
JSON representation
jQuery data table plugin
- Host: GitHub
- URL: https://github.com/gregmolnar/dtable
- Owner: gregmolnar
- License: mit
- Created: 2014-02-18T13:54:55.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2014-02-16T16:40:16.000Z (over 12 years ago)
- Last Synced: 2025-05-29T10:39:26.861Z (about 1 year ago)
- Language: PHP
- Size: 512 KB
- Stars: 0
- Watchers: 1
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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.
The built in template module uses [Nunjucks](http://jlongster.github.io/nunjucks/), you have to load it before DTable init.
***Examples***
See [http://dtable.devdrive.org](http://dtable.devdrive.org)
***Download***
This repo is used for development, you can [download](http://dtable.devdrive.org/publish/DTable.v0.5.0.tar.gz) the latest stable release.
***How to use***
``` javascript
$("#div").dtable({});
```
Evry module has its own options, you can see it in the modules list.
***Options***
``` text
{
definition: {
name: , # default: "json_url"
options:
},
template: {
name: , # default: "nunjucks"
options:
},
logger: {
name: , # default: "default"
options:
},
source: {
name: , # default: "json_url"
options:
},
search: {
name: , # default: "default"
options:
},
pagination: {
name: , # default: "default"
options:
},
loading: {
name: , # default: "default"
options:
},
order: {
name: , # default: "default"
options:
},
formatter: {
name: , # default: "false"
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: # url to download the json data, default: ""
method: <"post"|"get"> # method for request, default: "get"
data: {} # extra data to send, default: {}
timestamp: # if true, it will add timestamp to prevent caching the page
```
> ***response json format***
> ``` text
{
"title": , # table title
"columns": {
: {
"title": , # table title, if false no column title displayed,
# its work if all column title is false
"filter": }>, # column filter, placeholder: input field placeholder
"order": , # column order enable/disable
"html_tag_attr": :
}>,
// not required, used by formatter module
"formatter": # 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](http://jlongster.github.io/nunjucks/) to render the table. Its loading the template from the view_dir.
>***options***
>``` text
view_dir: # url pointing to the view dir, default: "/view"
table_template: # table template filename, default: "table.html"
rows_template: # rows template filename, default: "rows.html"
pagination_template: # pagination template filename, default: "pagination.html"
```
-------------------------
***Logger modules***
It's used to log errors/dev informations.
### "default"
>***options***
>``` text
debug: # 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***
>``` text
url: # url to put query paramters, default: ""
method: <"post"|"get"> # method to use, default: "post"
```
>***query parameters***
>```
search: ,
filter: "" || {
: ,
...
},
per_page: ,
offset: ,
order: "" || { # currently only one order by column supported, but its possible to have more than one
: "asc"||"desc",
...
}
```
>***response json format***
>```
[
{
: ,
....
},
....
]
```
-------------------------
***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"
> ``` text
placeholder: # serch input field placeholder, default: "search...",
waiting: # 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**
>``` text
show_first_and_last: # in pager, first and last page shown? default: true
pages: # how many page in the pager, odd number, default: 5
rows_per_page: # results per page, default: 20
rows_per_page_select: [, ...] # 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.
### "simple"
> escape html, no options
-------------------------
Dev requirements
================
- nodejs
- php5.4+ (for built in server)
- grunt
- npm
- bower
after clone, run update.sh to update npm and bower modules.
***usable grunt commands***
- `grunt build`: build the plugin
- `grunt server`: start server with live reloading on http://127.0.0.1:8080
Plans
-------
- advanced formatter (string, partial, image)
- a new loader module
- better error handling
- editable rows
-- column types (int, string. select, multiselect, boolean)