Datatables Macro

Last modified by Admin on 2021/03/17 21:41

cogXWiki macro to easily integrate the Datatables plugin for jQuery.
TypeXAR
Category
Developed by

Denis Gervalle

Active Installs5
Rating
0 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager

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

{{datatables tableid="example" extensions="FixedHeader" fixedheader="left: true"}}
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

sample1.gif

Code

{{datatables tableid="example2" extensions="FixedColumns,ColVis"}}
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

sample2.gif

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:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. 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
Tags:
    

Get Connected