Overview

The AJAX or DataTables view uses Javascript to display and retreive records in a table from the server.

This means that a user can search records in a table or sort by a column without the browsers page having to be refreshed. In smaller tables if all records have been loaded into the page this can result in very rapid display of search results as the user enters letters in the search box. You can see an example of this in US Presidents table on our demo website or in the image below:

DataTables dynamic Search

 

When using large table, the DataTables JQuery plugin works interactively with EasyTable Pro! to retreive records as required, an example of this is the 90,000 record USDA Plants table on our demo website.

Using the AJAX Layout

Like all other layouts to use the AJAX Layout you simple create a new menu itemin the Menu Manger.

Then select the type "Records — AJAX template"

Select AJAX Layout Menu Item

The "Menu Item Type" will now show that the AJAX Layout has been selected:

AJAX Records Template Item selected

and finally select the table you want to display:

Select a Table

 

 

You can also change the default behaviour for the DataTables default CSS file, by default the standard stylesheet is load. 

Load DataTables CSS

At this point, not all of the standard table options normally supported by an EasyTable Pro! menu item are supported. In general this means the option isn't supported in the DataTables library.

Configuration Options

EasyTable Pro! 1.2.0 and higher have new Options that you may want to adjust to your requirements.

Advanced Options

The Advanced Options tab now includes specific preferences for enabling AJAX tables and controlling whether or not EasyTable Pro will load the JQuery and JQuery UI libraries as shown in the image below:

Advanced Options for AJAX

Enable AJAX tables — When set to yes tables can be sorted, filtered and paged without refreshing the entire web page.

Load JQuery — JQuery is required to use AJAX layouts. By default, EasyTable Pro will load JQuery from Google's CDN, set this to No if you already have JQuery loaded via a template or other extension. Other options are the MediaTemple CDN or the version installed with EasyTable Pro 1.2.0 and higher, i.e. the local server.

Load JQueryUI — JQueryUI is required by the plugins used in AJAX layouts. By default, EasyTable Pro will load JQuery from Google's CDN, set this to No if you already have JQuery loaded via a template or other extension. Other options are the MediaTemple CDN or the version installed with EasyTable Pro 1.2.0 and higher, i.e. the local server.

Version — By default the latest version of JQuery available at the time EasyTable Pro! 1.2.0 and higher was packaged is selected, if for compatibility reasons you require older versions you can select them with these menus.

DataTables Options

DataTables Options 

Load DataTables — DataTables is required to use the DataTables layout. You can have the DataTables JS and default CSS load from your 'local' server or from Microsoft's CDN. Only set to 'No' if you have other software loading DataTables for you.

Small Table Limit — Small Tables are completely loaded into a page when first accessed, all sorting and filtering is done completely on the client side (i.e. in the browser). This value controlls the maximum number of records a Small table can have.This defaults to 500 records, i.e. if your table has less the 500 records the entire table will be loaded by DataTables and all processing will be performed on the users browser, generally resulting in a very fast experience once the table is loaded.

If you are using a table close to this limit but finding that your shared web host is taking a long time to deliver the table on first load you may want to reduce this number. 

Medium Table Limit — In Medium sized tables rows are loaded as need by DataTables, but where possible other all other work is done by the browser. This value controlls the maximum number of records a Medium sized table can have, any table larger than this number is considered a Large table and all data and processing is performed on the server.

CSS Override file —  The DataTables view can use the built-in default CSS or one in your template's CSS directory or a file can be specified here. CSS file locations include:

  • /media/com_easytablepro/css/jquery.dataTables.css
    — the default CSS from DataTables.net
  • /templates/yourtemplate/css/jquery.dataTables.css
    — a CSS file added to your templates CSS directory
  • /images/myDataTables.css
    — an example of a possible CSS Override file in /images directory that can be specified here 

When creating a new CSS file for your DataTables view we strong recommend you start by making a copy of the default jquery.dataTables.css and modifying that copy as needed.

We also advise against modifying the original jquery.dataTables.css.If you do modify the CSS file that ships with EasyTable Pro! rather than making a copy of it, the next time you update EasyTable Pro! the file will be replaced and all of your changes will be lost.

 

You need to login to access the forums.

Member Login

You need to Login to access your Subscription details or the Forums.