Datatables Macro
 | XWiki macro to easily integrate the Datatables plugin for jQuery. |
| Type | XAR |
| Category | |
| Developed by | |
| Active Installs | 5 |
| Rating | |
| License | GNU Lesser General Public License 2.1 |
Table of contents
Description
This macro ease the integration of the Datatables Plugin for jQuery into XWiki by a simple macro to load and configure it. All the javascript dependencies are taken from WebJars installed locally with the extension.
Macro Parameters
- tableid
- Identifier of the table to enhance. Each table should have an unique id set on the table element.
- extensions
- A list of Datatables extensions that should be loaded. This list is case insensitive and comma separated. Supported extensions are: ColVis, FixedColumns and FixedHeader. For the last two, additional parameters may be provided to the extension using fixedcolumns and fixedheader parameters.
- forcebs
- Force bootstrap styling. If the base skin is flamingo, bootstrap styling is used by default.
- content
- The macro content should contains the parameters for the initialization of the Datatables.
Samples
Here are some very simple samples. For all options, please refer to the Datatables Plugin website documentation.
Code
paging: false,
ordering: false,
searching: false,
info: false
{{/datatables}}
{{html clean="false" wiki="false" }}
<table id="example" class="table table-bordered" cellspacing="0">
<thead>
<tr>
<th>Headers</th>
<th>Column1</th>
<th>Column2</th>
...
<th>Column20</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1</td>
<td></td>
...
<td></td>
</tr>
<tr>
<td>Row2</td>
<td></td>
...
<td></td>
</tr>
...
</tbody>
</table>
{{/html}}
Result
Code
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
ordering: false,
searching: false,
info: false,
dom: "Ct"
{{/datatables}}
{{html clean="false" wiki="false" }}
<table id="example2" class="table table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Headers</th>
<th>Column1</th>
<th>Column2</th>
...
<th>Column20</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row1</th>
<td></td>
...
<td></td>
</tr>
<tr>
<th>Row2</th>
<td></td>
...
<td></td>
</tr>
...
</tbody>
</table>
{{/html}}
Result
Prerequisites & Installation Instructions
We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.
You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:
- Log in the wiki with a user having Administration rights
- Go to the Administration page and select the Import category
- Follow the on-screen instructions to upload the downloaded XAR
- Click on the uploaded XAR and follow the instructions
- You'll also need to install all dependent Extensions that are not already installed in your wiki
Release Notes
v1.0.1
Fix an issue with bootstrap styling.
If you are using a flamingo based skin, you should upgrade to this version.
Dependencies
Dependencies for this extension (org.xwiki.contrib.datatables:datatables-macro 1.0.1):
- org.xwiki.platform:xwiki-platform-rendering-wikimacro-api 6.2
- org.xwiki.platform:xwiki-platform-skin-skinx 6.2
- org.xwiki.platform:xwiki-platform-rendering-macro-velocity 6.2
- org.webjars:require-css 0.1.7
- org.webjars:requirejs-domready 2.0.1-2
- org.webjars:datatables 1.10.4
- org.webjars:datatables-colvis 1.1.1
- org.webjars:datatables-fixedcolumns 3.0.2
- org.webjars:datatables-fixedheader 2.1.2
- org.webjars:datatables-plugins 9dcbecd42ad
