Datatables

From HaFrWiki
Revision as of 18:09, 6 October 2021 by Hjmf (talk | contribs) (Responsive Mode)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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

top

Reference

top

  1. datatables.net, Datatables home page.