JQuery Data Tables
JQuery progressive enhancement of tables
Adds paging, searching and formatting to your tables automatically - just add
%JQREQUIRE{"datatables"}%
to your topic or template,
and wrap your tables into a
.jqDataTablesContainer
.
<div class="jqDataTablesContainer>
| *Header* | *Header* | *Header* | *Header* |
| Data | Data | Data | Data |
| Data | Data | Data | Data |
| Data | Data | Data | Data |
| Data | Data | Data | Data |
</div>
Use jquery.metadata
{options}
to configure the DataTable. See
http://www.datatables.net/usage/options for a full list of all options.
Some useful parameters are:
Name |
Description |
Default |
aaSorting |
an array specifying the columns to be sorted initially; e.g. 'aaSorting':[ [2,'asc'] ] will sort the third column in ascending order |
'aaSorting':[ [0, 'asc'] ] |
aLengthMenu |
an array of integers to chose from in the length select control |
[ 5, 10, 25, 50, 100 ] |
bFilter |
switch on/off the filter control |
false |
bInfo |
switch on/off the info control |
false |
bLengthChange |
switch on/off the length select |
false |
bPaginate |
switch on/off the paginate widget |
false |
iDisplayLength |
number of rows to display initially |
10 |
sPaginationType |
'full_numbers' - a more verbose pager, or 'two_buttons' - only a forward and backwards arrow |
'full_numbers' |
Use this to enable additional controls for filtering and pagination:
<div class="jqDataTablesContainer {'bFilter':true, 'bInfo':true, 'bLengthChange': true, 'bPaginate':true }">
| *Header* | *Header* | *Header* | *Header* |
| Data | Data | Data | Data |
| Data | Data | Data | Data |
| Data | Data | Data | Data |
| Data | Data | Data | Data |
</div>
Here's an example generating a table dynamically and then add a filter and pagination on top:
%STARTSECTION{"example1"}%
<div class="jqDataTablesContainer {'bFilter':true, 'bPaginate':true, 'bInfo':true }">
%SEARCH{
"1"
type="query"
topic="*Plugin"
header="| *Name* | *Date* | *Author* |"
format="| $topic | $date | $wikiname |"
nonoise="on"
}%
</div>
%ENDSECTION{"example1"}%
JQDataTablesPlugin comes with additional sorting features for specific types of data:
- numeric
- string
- date (extended to be able to parse Foswiki's default date format)
- currency
- metrics (e.g. killo, mega, giga, tera, ...)
Click on the table headers to sort the columns according to their data type.
%STARTSECTION{"example2"}%
<div class="jqDataTablesContainer">
| *#* | *String* | *Date* | *Number* | *Currency* | *Size* |
| 3 | ActionTrackerPlugin | 27 Jan 2010 - 17:07 | 1 | 1,00 € | 10KB |
| 1 | AntiWikiSpamPlugin | 03 Jan 2013 - 09:07 | 10 | 10,00 € | 3GB |
| 2 | BibtexPlugin | 13 May 2012 - 02:59 | 0.01 | 1,01 | 100MB |
| 5 | CommentPlugin | 10 Apr 2011 - 23:39 | 100 | 0,10 | 2024kB |
| 4 | FindElsewherePlugin | 23 Dec 2012 - 17:06 | 20 | 100,- € | 0.1kB |
| 6 | FindElsewherePlugin | | 0 | -100,- | 1024TB |
</div>
%ENDSECTION{"example2"}%
Installation
You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.
Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".
If you have any problems, or if the extension isn't available in
configure
, then you can still install manually from the command-line. See
http://foswiki.org/Support/ManuallyInstallingExtensions for more help.
Info
This foswiki plugin encapsulates version 1.9.4 of the
http://www.datatables.net/ jQuery plugin.