This is an old revision of the document!
Table of Contents
DataTables Plugin
Compatible with DokuWiki
"Frusterick Manners","Elenor of Tsort", Weatherwax,hrun,Detritus
Enhance tables with sorting, paging, filtering and more
This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.
Similar to searchtablejs, sortablejs, tablelayout
This plugin implements the DataTables jQuery plugin.
Installation
Install the plugin using the Plugin Manager and the download URL above, which points to latest version of the plugin. Refer to Plugins on how to install plugins manually.
Examples/Usage
See the plugin in action here. The sample page shows all the styles available with the plugin.
A simple usage:
<datatables> ^ Column A ^ Column B ^ Column C ^ | Row A1 | Row B1 | Row C1 | | Row A2 | Row B2 | Row C2 | | Row A2 | Row B2 | Row C3 | </datatables>
Some more complex samples
<datatables page-length="50"> [...] </datatables> <datatables paging="false" ordering="false" info="false" searching="false"> [...] </datatables>
No-Header
<datatables header-rows="true"> | Row A1 | Row B1 | Row C1 | | Row A2 | Row B2 | Row C2 | | Row A2 | Row B2 | Row C3 | </datatables>
Complex Headers
<datatables> ^ Name ^^ ^ First ^ Last ^ | My | Name | | Your | Name | </datatables>
Syntax
Basic syntax:
<datatables> [...] </datatables>
Options
See https://datatables.net/reference/option/ for complete options.
| Option | Description | Allowed values | Default value |
|---|---|---|---|
auto-width | Feature control DataTables' smart column width handling | boolean | true |
dom | Define the table control elements to appear on the page and in what order | string | lfrtip |
info | Feature control table information display field | boolean | true |
length-change | Feature control the end user's ability to change the paging display length of the table | boolean | true |
order | Initial order (sort) to apply to the table | json | [[0, "asc"]] |
ordering | Feature control ordering (sorting) abilities in DataTables | boolean | true |
page-length | Number of elements to display per page | integer | 10 |
paging | Enable or disable table pagination | boolean | true |
paging-type | Pagination button display options | simple – 'Previous' and 'Next' buttons only simple_numbers – 'Previous' and 'Next' buttons, plus page numbers full – 'First', 'Previous', 'Next' and 'Last' buttons full_numbers – 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers | simple_numbers |
scroll-x | Horizontal scrolling | px, integer, boolean | false |
scroll-y | Vertical scrolling | px, integer, boolean | false |
searching | Feature control search (filtering) abilities | boolean | true |
state-save | State saving - restore table state on page reload | boolean | false |
Notes:
- The option names are actually used as HTML5 data attributes, so they must be formatted with hyphens-and-lower-case instead of CamelCase (see https://datatables.net/manual/options#HTML-5-data-attributes).
- Do not prepend option names with
data-. The prefix will be added by the plugin. - Complex option values must be specified using valid JSON, wrapped with single quotes
'. For example:order='[[0, "asc"]]'orsearch='{"search":"fred"}'. - Datatables won't work in complex tables, where cells are merged together (e.g. with “:::”)
Extra Options
The plugin also implements extra features beyond the options from DataTables jQuery library.
| Option | Description | Allowed values | Default value |
|---|---|---|---|
header-rows | Makes sure the table header contains at least the specified number of rows, so that it can be formatted by DataTables. It transfers the first rows of the table body into the table header if necessary. Particularly useful when formatting tables generated by other plugins, which may not have created a proper table header. | integer | 0 (no effect) |
Extensions
| Attribute | Example | |
|---|---|---|
| Fixed Header | fixed-header | fixed-header="true" or fixed-header='{ "header": true, "headerOffset": 50 }' |
| Fixed Columns | fixed-columns | fixed-columns="true" |
| Responsive | responsive | responsive="true" |
| Buttons | buttons | buttons='[ "copy", "csv", "print" ]' |
Configuration and Settings
| Configuration Option | Default Value | Description |
|---|---|---|
excludedPages | (wiki|playground) | Excluded pages (insert a regex) |
enableForAllTables | 0 | Enable DataTables for all “well formatted” tables |
enableLocalization | 0 | Enable DataTables localization |
Demo
The demo and examples is available on http://lotar.altervista.org/dokuwiki/wiki/plugin/datatables.
Development
Change Log
- Added support for PHP 8.x on legacy DokuWiki by giterlizzi (2023-08-31 15:42)
- Fix typo by giterlizzi (2023-08-30 15:30)
- Updated release by giterlizzi (2023-07-23 17:42)
- Merge branch 'master' of https://github.com/LotarProject/dokuwiki-plu… by giterlizzi (2023-07-23 17:41)
- Merge pull request #70 from cosmocode/master by giterlizzi (2023-07-23 17:39)
- cleanup script.js by splitbrain (2023-07-12 10:17)
- code cleanup for syntax.php by splitbrain (2023-07-12 09:45)
- fix i18n handling by splitbrain (2023-07-12 09:35)
Bugs / Feature Requests
Please report bugs or feature requests at the Bug tracker.
ToDo/Wish List
FAQ
- I would like sorting a column by date. dd/mm/yyyy doesn't work. The way I have found is mm.dd which is not obvious (for french people) and Year doesn't match in this format. I follow this thread about but don't know if the feature is already implemented in Datatables. Thanks. — Digitalin 2016-02-08 13:16
- Information is sorted as text by default in Datatables. According to this post and documentation, the best format is yyyy/mm/dd and works well. In case, to get at once a new format with bash :
sed -E 's,([0-9]{2})/([0-9]{2})/([0-9]{4}),\3\/\2\/\1,g' page.txt > page2.txt(to adapt to your situation) — Digitalin 2016-10-07 14:07
Discussion
This plugin looks like the answer to my dreams!
Can it use any of the jQuery DataTables data sources? I.e. can I get data into the table from 'outside' rather than having to fill the data in the DokuWiki source page? In particular I would like to use the ajax server side processing to run some PHP to read a database to provide the data.
Also, are the table editing functions of DataTables available?