Олег Давидович: 1 версия импортирована

2024-10-18T07:00:08Z

1 версия импортирована

← Предыдущая версия	Версия от 07:00, 18 октября 2024
(нет различий)

1>Kl3b4n: correct image

2021-05-26T17:45:44Z

correct image

Новая страница

== 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 [https://docs.moodle.org/dev/jQuery_pre2.9 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:
# Go to the [https://datatables.net/download/ 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 "Download" tab
## Download files with minify and concatenate
# Put '''datatables.js''' into "plugin/folder/amd/src" folder
# Put '''datatables.min.js''' into "plugin/folder/amd/build" folder
# Put '''datatables.css''' into "plugin/folder/styles" folder
# Add HTML table on your page:
<code php>
echo '<table id="table1" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>';
</code>
<ol><li value="6">Add '''my_datatables.js''' into "plugin/folder/amd/src". My code looks like this:</li></ol>
<code php>
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
});
});
};
</code>
<ol><li value="7">Require css and js before rendering of header</li></ol>
<code php>
$PAGE->requires->css('/plugin/folder/styles/datatables.css');
$PAGE->requires->js_call_amd('local_booking/my_datatables', 'init');
</code>
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:

# Go to the [https://datatables.net/download/ 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 without the quotes (inside the href="")
# 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.
# Copy the JS link without the quotes (inside the src="")
# Paste as $PAGE->requires->js(new \moodle_url('the_js_link_provided_by_datatables_that_you_copied'), true); '''Note the single quotes.''' as above.
# Create a JS file in a folder within your plugin. I usually call the folder js.
# 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

<code php>
$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'));
</code>
If you are developing a block, then do the following:
<code php>
$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'));
</code>

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

<code>
$('#myFirstTable').DataTable({
dom: 'Blfrtip',
buttons: [
'copyHtml5',
'csvHtml5',
]
});

$('#mySecondTable').DataTable({
dom: 'lrtip',
});

$('#myThirdTable').DataTable();
</code>

Using jquery datatables in moodle - История изменений

Олег Давидович: 1 версия импортирована

1>Kl3b4n: correct image