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.

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();