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. 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.

Using DataTables with AMD

The way of using DataTable with AMD module that worked for me. Feel free to correct me.

How to do it:

1. Go to the DataTables download page
   1. "Step 1. Choose a styling framework" --> select Bootstrap 4
   2. "Step 2. Select packages" --> Select DataTables
   3. "Extensions" --> Select all extensions you want to use.
   4. "Step 3 Pick a download method" --> Select "Download" tab
   5. Download files with minify and concatenate
2. Put datatables.js into "plugin/folder/amd/src" folder
3. Put datatables.min.js into "plugin/folder/amd/build" folder
4. Put datatables.css into "plugin/folder/styles" folder
5. Add HTML table on your page:

echo '

<thead> </thead> <tbody> </tbody>

Column 1	Column 2

';

6. Add my_datatables.js into "plugin/folder/amd/src". My code looks like this:

import $ from 'jquery'; import 'local_booking/datatables';

export const init = () => {

   var data = [
       [
           "Tiger Nixon",
           "System Architect",
       ],
       [
           "Garrett Winters",
           "Director",
       ]
   ];
   $(document).ready(function() {
       $('#table1').DataTable({
           data: data
       });
   });

};

7. Require css and js before rendering of header

$PAGE->requires->css('/plugin/folder/styles/datatables.css'); $PAGE->requires->js_call_amd('local_booking/my_datatables', 'init'); If JS and styles are applied correctly without errors, it should look like this: https://i.imgur.com/s8sZdf1.png

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.

Open the php file that contains the page that will be displayed. Make sure the global $PAGE is set. Then do the following:

1. Go to the DataTables download page
2. Step 1 Choose a styling framework: select Bootstrap 4
3. Step 2 Select Packages: Select DataTables
4. Extensions: Select all extensions you want to use.
5. Step 3 Pick a download method: Select CDN tab
6. Copy the CSS link without the quotes (inside the href="")
7. Paste as $PAGE->requires->css(new \moodle_url('the_css_link_provided_by_datatables_that_you_copied')); Note the single quotes. This is important because the CDN links already use double quotes. This simplifies the copy pasting by not having to escape all double quotes.
8. Copy the JS link without the quotes (inside the src="")
9. Paste as $PAGE->requires->js(new \moodle_url('the_js_link_provided_by_datatables_that_you_copied'), true); Note the single quotes. as above.
10. Create a JS file in a folder within your plugin. I usually call the folder js.
11. Add $PAGE->requires->js(new \moodle_url('path_to_your_new_js_file_created_above'));

Your code should look something like this: I am using a plugin in the local folder called sample

$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 . '/local/sample/js/my_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 . '/blocks/sample/js/my_datatables.js'));

In your js file, add all of the tables that you will need DataTables for and configure each instance:

$('#myFirstTable').DataTable({

   dom: 'Blfrtip',
   buttons: [
       'copyHtml5',
       'csvHtml5',
   ]

});

$('#mySecondTable').DataTable({

   dom: 'lrtip',

});

$('#myThirdTable').DataTable();