Datatables: Difference between revisions
| (One intermediate revision by the same user not shown) | |||
| Line 6: | Line 6: | ||
The Datatables website has many examples and tutorials. | The Datatables website has many examples and tutorials. | ||
<br>This website is in no way intended to teach Datatables, but gives some tips and hints. | <br>This website is in no way intended to teach Datatables, but gives some tips and hints. | ||
== Basic == | |||
=== Assumptions/Requirements === | |||
* '''Javascript''' is enabled | |||
* '''Cookies''' are used | |||
* '''AJAX''' is used and basic AJAX understanding is avaialable. | |||
* '''jQuery''' is used | |||
* '''PHP''' (or other server side language) | |||
* Function ''$(document).ready'' exists | |||
=== Initial === | |||
At the end of the ''$(document).ready'' use the scripts: | |||
<pre> | |||
$(document).ready( | |||
function() { | |||
'use strict'; | |||
var met = ".ready"; | |||
setTimeout( "tsDatatables(), 2000); | |||
setTimeout( "tsEvents()" , 2500); | |||
} | |||
); // .ready | |||
</pre> | |||
== Responsive Mode == | == Responsive Mode == | ||
| Line 11: | Line 39: | ||
<br>But sometimes you want to change the way things are going. | <br>But sometimes you want to change the way things are going. | ||
<br>First of all when do you want to go in responsive mode. | <br>First of all when do you want to go in responsive mode. | ||
This snippet shows an example for enabling ''responsive'' only for screens smaller than 1080px in width | <br>This snippet shows an example for enabling ''responsive'' only for screens smaller than 1080px in width | ||
<pre> | <pre> | ||
var dtList = $('#listDT).DataTable( { | var dtList = $('#listDT).DataTable( { | ||
Latest revision as of 19:09, 6 October 2021
Datatables are a free library for adding interactive searchable sortable and editable Data inside tables to your website [1]
My earlier websites used Bootgrid (Rafael Staib: http://www.jquery-bootgrid.com) but since this framework was not that stable during a period I decided to move on to Datatables.
Introduction
The Datatables website has many examples and tutorials.
This website is in no way intended to teach Datatables, but gives some tips and hints.
Basic
Assumptions/Requirements
- Javascript is enabled
- Cookies are used
- AJAX is used and basic AJAX understanding is avaialable.
- jQuery is used
- PHP (or other server side language)
- Function $(document).ready exists
Initial
At the end of the $(document).ready use the scripts:
$(document).ready(
function() {
'use strict';
var met = ".ready";
setTimeout( "tsDatatables(), 2000);
setTimeout( "tsEvents()" , 2500);
}
); // .ready
Responsive Mode
The implemented Responsive mode does a good job and is also good manageable.
But sometimes you want to change the way things are going.
First of all when do you want to go in responsive mode.
This snippet shows an example for enabling responsive only for screens smaller than 1080px in width
var dtList = $('#listDT).DataTable( {
...
responsive : window.innerWidth < 1080 ? true : false,
...
}
See also
- rstudio.github.io, An R interface to the Datatables library
Reference
- ↑ datatables.net, Datatables home page.