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

Name Date Author
AntiWikiSpamPlugin 08 Jul 2015 - 00:31 ProjectContributor
AttachContentPlugin 13 Jun 2016 - 10:01 ProjectContributor
AutoTemplatePlugin 23 Jun 2019 - 07:45 IvicaPetrinic
AutoViewTemplatePlugin 09 Apr 2016 - 02:21 ProjectContributor
BatchUploadPlugin 15 Dec 2016 - 20:49 AdminUser
BreadCrumbsPlugin 23 Jun 2019 - 07:46 IvicaPetrinic
CaptchaPlugin 15 Dec 2016 - 20:49 AdminUser
ClassificationPlugin 23 Jun 2019 - 07:45 IvicaPetrinic
CommentPlugin 22 Jan 2018 - 14:46 ProjectContributor
CompareRevisionsAddonPlugin 08 Apr 2017 - 21:12 ProjectContributor
ConfigurePlugin 09 Dec 2017 - 03:47 ProjectContributor
DBCachePlugin 23 Jun 2019 - 07:46 IvicaPetrinic
DiffPlugin 25 Oct 2018 - 09:09 ProjectContributor
DigestPlugin 17 Nov 2009 - 13:38 ProjectContributor
EditRowPlugin 06 Feb 2018 - 00:16 ProjectContributor
EmptyPlugin 24 Sep 2015 - 19:35 ProjectContributor
FilterPlugin 23 Jun 2019 - 07:46 IvicaPetrinic
FlexFormPlugin 23 Jun 2019 - 07:45 IvicaPetrinic
FlexPaperPlugin 15 Dec 2016 - 20:50 AdminUser
FlexWebListPlugin 01 Jun 2018 - 15:12 AdminUser
GraphvizPlugin 23 Jun 2019 - 07:45 IvicaPetrinic
GridLayoutPlugin 01 Jun 2018 - 15:11 AdminUser
HeadlinesPlugin 15 Dec 2016 - 20:50 AdminUser
HistoryPlugin 22 Jan 2018 - 14:46 ProjectContributor
HomePagePlugin 15 Dec 2016 - 20:49 AdminUser
ImageGalleryPlugin 01 Jun 2018 - 15:11 AdminUser
ImagePlugin 23 Jun 2019 - 07:45 IvicaPetrinic
InterwikiPlugin 09 Dec 2017 - 03:47 ProjectContributor
JQDataTablesPlugin 23 Jun 2019 - 07:45 IvicaPetrinic
JQGridPlugin 01 Jun 2018 - 15:11 AdminUser
JQueryPlugin 23 Jun 2019 - 07:45 IvicaPetrinic
LikePlugin 14 Apr 2017 - 12:32 IvicaPetrinic
ListyPlugin 23 Jun 2019 - 07:46 IvicaPetrinic
MailerContribPlugin 05 May 2015 - 18:00 ProjectContributor
MediaElementPlugin 23 Jun 2019 - 07:44 IvicaPetrinic
MetaCommentPlugin 01 Jun 2018 - 15:11 AdminUser
MetaDataPlugin 23 Jun 2019 - 07:44 IvicaPetrinic
MimeIconPlugin 23 Jun 2019 - 07:45 IvicaPetrinic
MoreFormfieldsPlugin 23 Jun 2019 - 07:45 IvicaPetrinic
MultiLingualPlugin 23 Jun 2019 - 07:44 IvicaPetrinic
NatEditPlugin 01 Jun 2018 - 15:11 AdminUser
NatSkinPlugin 23 Jun 2019 - 07:45 IvicaPetrinic
PageOptimizerPlugin 01 Jun 2018 - 15:11 AdminUser
PreferencesPlugin 15 Jun 2015 - 00:26 ProjectContributor
PubLinkFixupPlugin 14 Sep 2015 - 00:51 ProjectContributor
RedDotPlugin 15 Dec 2016 - 20:49 AdminUser
RenderListPlugin 09 Apr 2016 - 02:21 ProjectContributor
RenderPlugin 23 Jun 2019 - 07:44 IvicaPetrinic
SlideShowPlugin 06 Sep 2016 - 08:47 ProjectContributor
SmiliesPlugin 15 Dec 2016 - 20:49 AdminUser
SolrPlugin 23 Jun 2019 - 07:46 IvicaPetrinic
SpreadSheetPlugin 20 Jan 2017 - 02:31 ProjectContributor
SubscribePlugin 01 Jun 2018 - 15:12 AdminUser
TWikiCompatibilityPlugin 15 Mar 2015 - 17:07 ProjectContributor
TablePlugin 22 Jan 2018 - 15:24 ProjectContributor
TagCloudPlugin 15 May 2014 - 11:51 ProjectContributor
TinyMCEPlugin 25 Jan 2017 - 15:00 ProjectContributor
TopicInteractionPlugin 23 Jun 2019 - 07:46 IvicaPetrinic
TopicTitlePlugin 28 May 2018 - 10:42 ProjectContributor
TwistyPlugin 25 Apr 2016 - 14:27 ProjectContributor
UpdatesPlugin 01 Jun 2018 - 15:11 AdminUser
UploadPlugin 15 Dec 2016 - 20:49 AdminUser
WebLinkPlugin 23 Jun 2019 - 07:44 IvicaPetrinic
WorkflowPlugin 01 Jun 2018 - 15:11 AdminUser
WysiwygPlugin 09 Dec 2017 - 03:47 ProjectContributor

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
Topic attachments
I Attachment Action Size Date Who CommentSorted descending
MakefileEXT Makefile manage 474 bytes 26 Nov 2018 - 12:28 IvicaPetrinic  
currency.uncompressed.jsjs currency.uncompressed.js manage 750 bytes 26 Nov 2018 - 12:28 IvicaPetrinic  
date-foswiki.uncompressed.jsjs date-foswiki.uncompressed.js manage 1 K 26 Nov 2018 - 12:28 IvicaPetrinic  
jquery.datatables.addons.jsjs jquery.datatables.addons.js manage 7 K 26 Nov 2018 - 12:28 IvicaPetrinic  
jquery.datatables.addons.js.gzgz jquery.datatables.addons.js.gz manage 2 K 26 Nov 2018 - 12:28 IvicaPetrinic  
jquery.datatables.addons.uncompressed.jsjs jquery.datatables.addons.uncompressed.js manage 15 K 26 Nov 2018 - 12:28 IvicaPetrinic  
jquery.datatables.csscss jquery.datatables.css manage 5 K 26 Nov 2018 - 12:28 IvicaPetrinic  
jquery.datatables.css.gzgz jquery.datatables.css.gz manage 1 K 26 Nov 2018 - 12:28 IvicaPetrinic  
jquery.datatables.init.uncompressed.jsjs jquery.datatables.init.uncompressed.js manage 9 K 26 Nov 2018 - 12:28 IvicaPetrinic  
jquery.datatables.js.patchpatch jquery.datatables.js.patch manage 2 K 26 Nov 2018 - 12:28 IvicaPetrinic  
jquery.datatables.uncompressed.csscss jquery.datatables.uncompressed.css manage 6 K 26 Nov 2018 - 12:28 IvicaPetrinic  
metrics.uncompressed.jsjs metrics.uncompressed.js manage 1 K 26 Nov 2018 - 12:28 IvicaPetrinic  
Topic revision: r11 - 23 Jun 2019, IvicaPetrinic
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 Foswiki? Send feedback