DataTables support in Moodle

This Moodle plugin allows for enhancing HTML tables with DataTables features such as in-browser sorting and filtering of table values.

Examples

To add basic DataTables filtering and sorting to the tables generated by the Ad Hoc Database Queries plugin, add a javascript/datatables.js file to your theme with this content:

require(['core/first'], function() {
    require(['tool_datatables/init'], function(dt) {
        selector = '#page-admin-report-customsql-index .generaltable, #page-admin-report-customsql-view .generaltable';
        dt.init(selector, {});
    });
});

and add this to the admin theme's config.php:

$THEME->javascripts_footer = array("datatables");

The above general scheme allows one to apply DataTables to any table in the moodle core or plugins as long as one can construct the necessary CSS/jQuery selector to select those tables.

See test.php for an example plugin page that employs DataTables. The simplest case adds this to the page definition:

$PAGE->requires->js_call_amd('tool_datatables/init', 'init',
                             array('.datatable', array()));

Any table with the datatable class (matching the .datatable selector above) will get default DataTables features. The second parameter allows for passing options to DataTables, just an empty array() in this case.

Design

This plugin packages the DataTables javascript code as an AMD module per JavaScript Modules. The original javascript code downloaded from datatables.net sits in the amd/orig directory. The Makefile rules modify that code slightly to work in the Moodle context, generating corresponding files in amd/src. On a build machine we run the grunt tool to generate the files in amd/build. All of the generated files are saved in the code repository and in the plugin zip file so that this plugin can be installed directly without use of the Makefile or grunt.

An alternative design would have referenced the DataTables javascript code directly from an external CDN rather than copying it to locally served files. I found that approach hard to integrate with the way Moodle configures Require.js.

Useful links

• Code repository
• Issue tracker
• DataTables documentation

Licence

The javascript files in the amd/orig directory are copied from the DataTables website and have their own license. The corresponding converted files within amd/build should inherit that same license. The style/css files also come from DataTables and retain their licence. These files do not interact with Moodle core or APIs.

The remaining files are new and have the GNU GPL v3 licence. See COPYING.txt.

Contributor

Fred Yankowski