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.