using jquery datatables in moodle
Introduction
Although Moodle has an excellent Table API, I have found myself preferring using the jQuery DataTables plugin in most of the Moodle plugins that I develop. In the past, I could load DataTables using the jquery plugins folder structure. That is, creating a folder in my plugin called jquery and then adding DataTable files in the folder and pointing to those files using an array within the plugins.php (see jQuery pre2.9). However, since the arrival of AMD modules, I have yet to find a way to initialize DataTables with all features. I can get it to work with the base features, but not with extensions, they fail to load. If someone knows how to do it with AMD, please write some documentation on it. Not wanting to loose the features for DataTables, I found another way to load it from CDN.
Loading DataTables from CDN
This is how I am loading and using DataTables in my plugins. This may not be the best way to do it, but it does work for me.
- Go to the DataTables download page
- Step 1 Choose a styling framework: select Bootstrap 4
- Step 2 Select Packages: Select DataTables
- Extensions: Select all extensions you want to use.
- Step 3 Pick a download method: Select CDN tab
- Copy the CSS link wihtout the quotes (inside the href="")
- Paste as $PAGE->requires->css(new \moodle_url('https://cdn.datatables.net/v/bs4/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.min.css'));
In your php file that will display the page add the following: (Make sure the global $PAGE is set)
$PAGE->requires->js(new \moodle_url('https://cdn.datatables.net/v/bs4/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.min.js'), true);
$PAGE->requires->css(new \moodle_url('https://cdn.datatables.net/v/bs4/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.min.css'));
$PAGE->requires->js(new \moodle_url($CFG->wwwroot . '/your/plugin/name/and/javascript_location/javascript_file_name_datatables.js'));
If you are developing a block, then do the following:
$this->page->requires->js(new \moodle_url('https://cdn.datatables.net/v/bs4/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.min.js'), true);
$this->page->requires->css(new \moodle_url('https://cdn.datatables.net/v/bs4/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.min.css'));
$this->page->requires->js(new \moodle_url($CFG->wwwroot . '/your/plugin/name/and/javascript_location/javascript_file_name_datatables.js'));
