2015-06-06 17:19:40 +02:00
|
|
|
TableFilter
|
2015-06-06 16:16:41 +02:00
|
|
|
===========================
|
2014-07-20 13:32:13 +02:00
|
|
|
|
2015-02-14 09:59:12 +01:00
|
|
|
Filter HTML tables data easily
|
|
|
|
|
|
|
|
This script adds to any html table a "filter by column" feature that enables
|
2015-06-06 16:16:41 +02:00
|
|
|
users to filter and limit the data displayed within a long table. The script
|
|
|
|
automatically adds a filter grid bar at the top of the desired table.
|
|
|
|
|
2015-06-08 13:49:14 +02:00
|
|
|
TableFilter is based on the HTML Table Filter generator script, it is a modernized version of it.
|
|
|
|
|
2015-06-06 16:16:41 +02:00
|
|
|
##Features
|
|
|
|
* Convert a regular HTML table into an advanced grid component providing:
|
|
|
|
* Advanced columns filtering model
|
|
|
|
* Sorting and pagination facilities
|
|
|
|
* Complete selection model (addon)
|
|
|
|
* Extended keyboard navigation (addon)
|
|
|
|
* Inline cell or row editing (addon)
|
|
|
|
* Row insertion or deleting (addon)
|
|
|
|
* And even more behaviors...
|
|
|
|
* Attach to an existing HTML table
|
|
|
|
* Integration with any server-side technology as this is a pure client-side
|
|
|
|
solution
|
|
|
|
* Callbacks for all events, and delegates for most actions
|
|
|
|
* Exhaustive documentation and API
|
|
|
|
* Valuable support provided under a Premium request
|
|
|
|
|
2015-06-06 17:18:53 +02:00
|
|
|
##Setup
|
2015-06-08 13:49:14 +02:00
|
|
|
Copy the ``tablefilter`` directory under ``dist`` and place it at desired location in your project. Then include the bundle js file in your page:
|
|
|
|
```shell
|
|
|
|
<script src="``path/to/my/scripts``/tablefilter/tablefilter.js"></script>
|
|
|
|
```
|
|
|
|
Place the following snippet just under the HTML table
|
2015-06-06 17:18:53 +02:00
|
|
|
```shell
|
2015-06-08 13:49:14 +02:00
|
|
|
<script>
|
|
|
|
var tf = new TableFilter('my-table-id');
|
|
|
|
tf.init();
|
|
|
|
</script>
|
2015-06-06 17:18:53 +02:00
|
|
|
```
|
|
|
|
|
2015-06-06 16:36:49 +02:00
|
|
|
##Development
|
2015-06-06 16:16:41 +02:00
|
|
|
Start by installing any dependencies.
|
|
|
|
|
|
|
|
```shell
|
|
|
|
npm install
|
|
|
|
```
|
2015-06-06 16:36:49 +02:00
|
|
|
Use the Grunt ``dev`` task to launch a build / watch cycle and start the local
|
|
|
|
sever on port ``8080``:
|
|
|
|
|
|
|
|
```shell
|
|
|
|
grunt dev
|
|
|
|
```
|
|
|
|
|
2015-06-06 16:41:58 +02:00
|
|
|
Use the ``build`` task to generate a production build:
|
2015-06-06 16:36:49 +02:00
|
|
|
|
|
|
|
```shell
|
|
|
|
grunt build
|
|
|
|
```
|
|
|
|
|
|
|
|
The ``default`` Grunt task will create a production build and also run the
|
|
|
|
tests:
|
|
|
|
|
|
|
|
```shell
|
|
|
|
grunt
|
|
|
|
```
|
|
|
|
|
|
|
|
To run all the tests:
|
|
|
|
|
|
|
|
```shell
|
|
|
|
grunt test
|
|
|
|
```
|
|
|
|
|
2015-06-06 16:41:58 +02:00
|
|
|
and to run specific test(s):
|
2015-06-06 16:36:49 +02:00
|
|
|
|
|
|
|
```shell
|
|
|
|
grunt test-only:test.html
|
2015-06-06 16:41:58 +02:00
|
|
|
grunt test-only:test.html,test-sort.html
|
2015-06-06 16:36:49 +02:00
|
|
|
```
|
2015-06-06 16:16:41 +02:00
|
|
|
|
2015-06-06 17:02:31 +02:00
|
|
|
## Support
|
|
|
|
* GitHub for reporting bugs and feature requests.
|
2015-06-06 16:16:41 +02:00
|
|
|
|
2015-06-06 17:02:31 +02:00
|
|
|
## License
|
2015-06-06 16:16:41 +02:00
|
|
|
MIT
|
|
|
|
|