JQuery Data Tables

04 Oct 2016 - 20:48 | Version 7 |
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"}%

Name Date Author
ActionTrackerPlugin 01 Mar 2013 - 06:02 UnknownUser
AntiWikiSpamPlugin 30 Nov 2015 - 19:32 UnknownUser
AutoTemplatePlugin 04 Oct 2016 - 20:48 TimDaly
AutoViewTemplatePlugin 30 Apr 2016 - 23:35 UnknownUser
BookmakerPlugin 06 Jan 2016 - 19:54 TimDaly
BreadCrumbsPlugin 23 Apr 2014 - 05:26 UnknownUser
ChecklistPlugin 25 Jul 2015 - 20:09 UnknownUser
ClassificationPlugin 17 Jul 2015 - 09:46 UnknownUser
CommentPlugin 30 Apr 2016 - 23:38 UnknownUser
CompareRevisionsAddonPlugin 16 Nov 2015 - 00:03 UnknownUser
ConfigurePlugin 30 Apr 2016 - 23:42 UnknownUser
DBCachePlugin 06 Jan 2016 - 20:17 TimDaly
DirectedGraphPlugin 18 Jul 2015 - 22:50 UnknownUser
DocumentViewerPlugin 02 Sep 2016 - 07:19 UnknownUser
EditRowPlugin 30 Apr 2016 - 23:50 UnknownUser
EditTablePlugin 16 Nov 2015 - 00:03 UnknownUser
EmptyPlugin 16 Nov 2015 - 00:03 UnknownUser
ExplicitNumberingPlugin 10 Aug 2016 - 10:55 TimDaly
FilterPlugin 04 Oct 2016 - 20:48 TimDaly
FlexFormPlugin 04 Oct 2016 - 20:48 TimDaly
FlexWebListPlugin 06 Jan 2016 - 19:55 TimDaly
GenPDFAddOnPlugin 03 Aug 2013 - 19:55 UnknownUser
GenPDFPrincePlugin 10 Aug 2016 - 11:33 TimDaly
GraphvizPlugin 10 Aug 2016 - 11:34 TimDaly
GridLayoutPlugin 04 Oct 2016 - 20:48 TimDaly
HistoryPlugin 16 Nov 2015 - 00:03 UnknownUser
HomePagePlugin 16 Nov 2015 - 00:03 UnknownUser
ImagePlugin 10 Aug 2016 - 11:34 TimDaly
InterwikiPlugin 16 Nov 2015 - 00:03 UnknownUser
JQDataTablesPlugin 04 Oct 2016 - 20:48 TimDaly
JQGridPlugin 04 Oct 2016 - 20:48 TimDaly
JQueryPlugin 01 May 2016 - 00:02 UnknownUser
ListyPlugin 04 Oct 2016 - 20:48 TimDaly
MailerContribPlugin 16 Nov 2015 - 00:03 UnknownUser
MetaDataPlugin 16 Dec 2014 - 09:07 UnknownUser
MimeIconPlugin 04 Oct 2016 - 20:48 TimDaly
MoreFormfieldsPlugin 10 Aug 2016 - 11:34 TimDaly
MultiLingualPlugin 04 Oct 2016 - 20:48 TimDaly
NatEditPlugin 10 Aug 2016 - 11:34 TimDaly
NatSkinPlugin 10 Aug 2016 - 11:33 TimDaly
PreferencesPlugin 16 Nov 2015 - 00:03 UnknownUser
PubLinkFixupPlugin 16 Nov 2015 - 00:03 UnknownUser
PublishPlugin 06 Jan 2016 - 19:55 TimDaly
RedDotPlugin 04 Oct 2016 - 20:48 TimDaly
RenderListPlugin 16 Nov 2015 - 00:03 UnknownUser
RenderPlugin 10 Aug 2016 - 11:34 TimDaly
RevCommentPlugin 02 Sep 2015 - 23:29 UnknownUser
SlideShowPlugin 01 May 2016 - 09:18 UnknownUser
SmiliesPlugin 06 Jan 2016 - 19:55 TimDaly
SpreadSheetPlugin 01 May 2016 - 09:25 UnknownUser
SubscribePlugin 06 Jan 2016 - 19:55 TimDaly
TWikiCompatibilityPlugin 16 Nov 2015 - 00:03 UnknownUser
TablePlugin 03 Feb 2016 - 13:34 UnknownUser
TinyMCEPlugin 16 Nov 2015 - 00:03 UnknownUser
TopicInteractionPlugin 17 Jul 2015 - 13:35 UnknownUser
TwistyPlugin 16 Nov 2015 - 00:03 UnknownUser
UpdatesPlugin 16 Nov 2015 - 00:03 UnknownUser
WebLinkPlugin 29 Aug 2014 - 12:18 UnknownUser
WysiwygPlugin 01 May 2016 - 09:41 UnknownUser

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"}%

# 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

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.

Author: Foswiki:Main.SvenDowideit, Foswiki:Main.michaelDaum
Copyright: © 2012, SvenDowideit@fosiki.com, © 2013-2014 Michael Daum http://michaeldaumconsulting.com
License: GPL (GNU General Public License)
Release: 2.01
Version: 2.01
Change History:  
18 Mar 2014: remove console.log() leftover; improve sorting date columns
09 Nov 2013: implemented sorting for currency, and metrics
08 Nov 2013: make it work under {NoConflict}; enable jquery-ui theming by default now; created a non-goofy default look and feel to play nicely with a skin's table design; only add DataTables support to specific tables, not all; make it configurable with declarative metadata; compress and minify plugin assets; remove files not required by the plugin; clean up controls and css classes added by TablePlugin's; added type detector for foswiki date columns
18 Jan 2013: Initial version
Dependencies:
NameVersionDescription
Foswiki::Plugins::JQueryPlugin>=4.10Required
Home: http://foswiki.org/Extensions/JQDataTablesPlugin
Support: http://foswiki.org/Support/JQDataTablesPlugin
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding NCSS Leaders-Board? Send feedback