README
timbles.js
timbles is a very lightweight jQuery plugin (lol is that an oxymoron) that allows you to add sorting and pagination to an existing <table>. That's it. Actually, it can also create the table for you with some JSON data and minimal configuration. It's p easy. I think it would make for a great base for table functionality you'd want to build into your apps.
Install
You need to enqueue jQuery (duh) and the timbles.js file.
<script src="jquery.js"></script>
<script src="timbles.js"></script>
Configure timbles
Existing Table of data
Let's say you have a table on your page already, all populated with data:
| Name | Size | Kind | Date Added | Notes |
|---|---|---|---|---|
| dhtmlconf.png | 77 KB | PNG Image | August 31, 2014, 11:16 PM | dhtmlconf logo |
| icla.pdf | 26 KB | Adobe PDF document | August 27, 2014, 12:51 PM | Individual Contributor License Agreement |
| Slime Girls - Vacation Wasteland EP.zip | 72.9 MB | ZIP archive | August 25, 2014, 9:40 PM | cool chiptunes from lwlvl |
And here is the source code:
<table border="1">
<thead>
<tr>
<th id="name">Name</th>
<th id="size">Size</th>
<th id="kind">Kind</th>
<th id="date-added">Date Added</th>
<th id="notes" class="no-sort">Notes</th>
</tr>
</thead>
<tr>
<td>dhtmlconf.png</td>
<td>77 KB</td>
<td>PNG Image</td>
<td>August 31, 2014, 11:16 PM</td>
<td>dhtmlconf logo</td>
</tr>
<tr>
<td>icla.pdf</td>
<td>26 KB</td>
<td>Adobe PDF document</td>
<td>August 27, 2014, 12:51 PM</td>
<td>Individual Contributor License Agreement</td>
</tr>
<tr>
<td>Slime Girls - Vacation Wasteland EP.zip</td>
<td>72.9 MB</td>
<td>ZIP archive</td>
<td>August 25, 2014, 9:40 PM</td>
<td>cool chiptunes from lwlvl</td>
</tr>
</table><
You don't need to generate a new table with JSON because your table is there already. And you just want to be able to make it sortable. Then just call this after you enqueued timbles.js as per the above install directions:
// get your table
var $table = $('table');
// call timbles
$table.timbles({ sorting: true });In order for sorting to work, the parent <tr> of the header rows needs to be within a <thead> tag. The <th> cells should to have an id attribute, like in the example above, but if they are left out then Timbles will assign some ugly id attribute values for you.
If you want to initially sort your table on load, there are sorting properties you can set:
// get your table
var $table = $('table');
// call timbles with sorting property
$table.timbles({
sorting: {
order: 'asc', // 'asc' for ascending sort, 'desc' for descending
keyId: 'name', // the id of the column you want to initially sort by
}
});
If you don't want all of the columns to be sortable, add the class no-sort to the
Generating a table from a JSON file or an array of row objects
If your data is in a JSON file or array, add a <table> element to your page and then call timbles on it.
<table id="example"></table>
// get your table
var $table = $('#example');
// call timbles with dataConfig property
$table.timbles({
dataConfig: {
/**
* There are two types of data that timbles currently accepts:
* - a json filename
* - an array of row objects
*/
data: 'data.json', // path to load json file from, or an array of row objects
columns: [
/**
* you have to set the column headers with the following required properties:
* - label (string), the text between <th> and </th>
* - id (string), the json object property attributed to the column
*
* and here are some optional properties:
* - noSorting (boolean), if set to true the column won't be sortable
* if you have the non-column property sorting set to true
* - textTransform (function), this function will be applied to the cell text
* content. useful for when you want to add currency symbols, html, etc
* (the old name for this function is `dataFilter`, we still support that one)
* - valueTransform (function), this function will be applied to the data-value
* attribute, which is used for sorting. Useful if you want a column to
* sort case insensitively.
*/
{ label: 'Name', id: 'name', valueTransform: function(value) { return value.toLowerCase(); } },
{ label: 'Size', id: 'size' },
{ label: 'Kind', id: 'kind' },
{ label: 'Date Added', id: 'dateAdded' },
{ label: 'Notes', id: 'notes', noSorting: true }
{ label: 'Price', id: 'price', textTransform: function(value) { return '