You are here: System » Plugins » JQDataTablesPlugin

JQuery Data Tables

01 Apr 2015 - 13:19 | Version 1 |
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://datatables.net/reference/index 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
AccountPlugin 03 Sep 2015 - 12:05 ProjectContributor
AutoTemplatePlugin 31 Aug 2015 - 12:01 ProjectContributor
AutoViewTemplatePlugin 10 Apr 2011 - 23:43 ProjectContributor
BlogPlugin 30 Jun 2015 - 14:15 ProjectContributor
BreadCrumbsPlugin 28 Apr 2008 - 18:53 ProjectContributor
CampaignMonitorPlugin 02 Jan 2015 - 19:08 ProjectContributor
CaptchaPlugin 02 Dec 2014 - 09:27 ProjectContributor
ClassificationPlugin 17 Jul 2015 - 13:32 ProjectContributor
CommentPlugin 10 Apr 2011 - 20:03 ProjectContributor
CompareRevisionsAddonPlugin 18 Jan 2015 - 17:51 ProjectContributor
DBCachePlugin 08 Mar 2016 - 16:52 ProjectContributor
DisqusPlugin 16 Dec 2014 - 13:21 ProjectContributor
EditChapterPlugin 17 Jul 2015 - 18:22 ProjectContributor
EditTablePlugin 11 Apr 2011 - 00:07 ProjectContributor
EmptyPlugin 18 Nov 2013 - 23:06 UnknownUser
ExplicitNumberingPlugin 20 Jan 2010 - 02:37 ProjectContributor
FilterPlugin 17 Jul 2015 - 18:28 ProjectContributor
FlexFormPlugin 16 Dec 2014 - 13:37 ProjectContributor
FlexWebListPlugin 17 Jul 2015 - 18:33 ProjectContributor
GenPDFPrincePlugin 16 Dec 2014 - 13:48 ProjectContributor
GraphvizPlugin 11 Aug 2015 - 15:28 ProjectContributor
GridLayoutPlugin 01 Sep 2015 - 14:40 ProjectContributor
HistoryPlugin 21 Jul 2015 - 19:42 ProjectContributor
ImageGalleryPlugin 16 Dec 2014 - 14:20 ProjectContributor
ImagePlugin 17 Jul 2015 - 19:05 ProjectContributor
InterwikiPlugin 10 Apr 2011 - 14:33 ProjectContributor
JQDataTablesPlugin 01 Apr 2015 - 13:19 ProjectContributor
JQGridPlugin 15 Jul 2015 - 18:06 ProjectContributor
JQueryPlugin 21 Jul 2015 - 19:42 ProjectContributor
ListyPlugin 07 Mar 2014 - 16:38 ProjectContributor
MailerContribPlugin 18 Nov 2013 - 23:09 UnknownUser
MetaCommentPlugin 27 Feb 2015 - 15:42 ProjectContributor
MetaDataPlugin 29 Apr 2014 - 10:59 ProjectContributor
MimeIconPlugin 17 Jul 2015 - 19:44 ProjectContributor
MoreFormfieldsPlugin 09 Apr 2015 - 13:47 ProjectContributor
MultiLingualPlugin 16 Dec 2014 - 16:36 ProjectContributor
NatEditPlugin 13 Aug 2015 - 16:16 ProjectContributor
NatSkinPlugin 17 Jul 2015 - 19:56 ProjectContributor
PageOptimizerPlugin 23 Feb 2015 - 15:19 ProjectContributor
PasswordPlugin 23 Dec 2012 - 17:06 UnknownUser
PreferencesPlugin 18 Nov 2013 - 23:09 UnknownUser
RedDotPlugin 17 Jul 2015 - 19:50 ProjectContributor
RenderListPlugin 15 Jul 2011 - 10:52 ProjectContributor
RenderPlugin 23 Dec 2012 - 17:06 ProjectContributor
SecureDownloadPlugin 08 Jun 2016 - 17:31 ProjectContributor
SendEmailPlugin 08 Jan 2010 - 23:54 ProjectContributor
SetVariablePlugin 29 Apr 2015 - 16:47 UnknownUser
SlideShowPlugin 21 Jul 2015 - 19:42 ProjectContributor
SmiliesPlugin 21 Jul 2015 - 19:42 ProjectContributor
SocialSharePlugin 02 Jan 2015 - 19:08 ProjectContributor
SolrPlugin 21 Jul 2015 - 14:42 ProjectContributor
SpreadSheetPlugin 10 Apr 2011 - 19:55 ProjectContributor
TWikiCompatibilityPlugin 18 Nov 2013 - 23:10 UnknownUser
TablePlugin 21 Sep 2011 - 08:53 ProjectContributor
TagCloudPlugin 15 May 2014 - 13:51 ProjectContributor
TimeSincePlugin 17 Nov 2014 - 14:05 ProjectContributor
TinyMCEPlugin 27 Apr 2012 - 15:45 ProjectContributor
TopicInteractionPlugin 17 Jul 2015 - 19:32 ProjectContributor
TrashPlugin 07 Aug 2013 - 14:15 ProjectContributor
TreePlugin 02 Sep 2015 - 21:11 ProjectContributor
TwistyPlugin 21 Jul 2015 - 19:42 ProjectContributor
TwitterPlugin 16 Dec 2014 - 19:00 ProjectContributor
WebLinkPlugin 29 Nov 2010 - 15:45 ProjectContributor
WorkflowPlugin 08 Aug 2014 - 16:23 ProjectContributor
WysiwygPlugin 18 Nov 2013 - 23:09 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.

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

Contact Us

Atomikos Corporate Headquarters
Hoveniersstraat, 39/1, 2800
Mechelen, Belgium

E info@atomikos.com
E sales@atomikos.com
T +3215613055

Subscribe to our newsletter

Never miss an update

Copyright 2017 Atomikos BVBA