View Categories

Advanced settings

The plugin uses jQuery DataTables to publish a table on a web page. The jQuery DataTables library has a lot of configurable options, which allow users of this library to change the look and feel.

The plugin uses a set of default options. To allow plugin users to overwrite these default options or add their own, Data Tables contains a Table options (advanced) column. Options entered in this column:

  • will be added to the default plugin options, or
  • overwrite the default plugin options.

Valid JSON #

Your advanced settings MUST BE valid JSON!
If you enter invalid JSON, the plugin will discard your advanced settings and use the default. The plugin supports JSON validation for this column. This feature can be disabled (how to disable the JSON validator…). Be aware, even if you disable the JSON validator your advanced settings still must be valid JSON (use an online validator instead).

Some examples #

Define in which order data table elements are shown #

{ "dom": "iptlfr" }

Force ENTER key #

{ "wpda_search_force_enter": false }
Starting from version 5.1.2 the user needs to press the ENTER key to start a search. Add the following option to perform a search while the user is typing. This was the default behavior in earlier versions and puts a heavier load on your server!

Load all data into the browser on page load #

{ "serverSide": false }

CAREFULL – This increases your page load time. DO NOT use this with large tables!

Remember table state #

{ "stateSave": true }

Disable token check #

{ "killToken": true }

The killToken option removes the token check which is added to each request by default to prevent unauthorized usage of data sources.

Add a placeholder to the search box #

{ "language": { "search": "_INPUT_", "searchPlaceholder": "Search..." } }

Add an icon to the search box #

{ "language": { "search": "_INPUT_", "searchPlaceholder": "🔍" } }

Change the list of shown entries (lengthMenu = items shown in list, pageLength = default) #

{
    "lengthMenu": [ 10, 20, 30, 50, 100 ],
    "pageLength": 30
}

Turn off paging, load all data at one, set scroll bars #

{
    "paging": false,
    "serverSide":false,
    "info":false,
    "retrieve":true,
    "scrollY": "150px",
    "scrollCollapse": true,
    "scrollX":"0"
}

Overwrite some plugin defaults #

{
    "pageLength":5,
    "stateSave":false,
    "bAutoWidth":true,
    "fixedColumns": true,
    "fixedHeader": true
}

Disable Row Selection #

{
    "select":false
}

Using JavaScript functions #

The following code auto updates a table each 10 seconds

{ "initComplete": "function(settings, json) { setInterval(function() { jQuery('#'+settings.sTableId).DataTable().ajax.reload(null,false) }, 10000) }" }

Add javascript function which sets color depending on content

{ "fnRowCallback": "function(row, data, index) { if (data[1]=='Z 800 E ABS') { jQuery(row).find('td:eq(1)').css('color','black'); } else { jQuery(row).find('td:eq(1)').css('color','green'); } }" }
In this example, I’m using a javascript function. Please notice, that the function is written between double quotes. This is to maintain valid JSON. The value of property fnRowCallback is a string, which contains the function code.
Function fnRowCallback checks the value of column Brand Type. If the type is Z 800 E ABS, the text color is set to black. Otherwise it is set to green. You can see this code in action in real time below.

Revised JavaScript example #

Charles Godwin advised to revise the example above to make it easier to understand, less error prone, and debuggable in the browser developer. In his revision the javascript code is added to an external function. The Code Manager is used to add the external javascript function to the web page. The revised advanced table options looks like this:

Calling javascript function instead of writing inline javascript code

{ "fnRowCallback": "function(row, data, index) { setColor(row, data, index); }" }

Use the Code Manager to add javascript function setColor to your web page

function setColor(row, data, index) {
    if (data[1] == 'Z 800 E ABS') {
        jQuery(row).find('td:eq(1)').css('color', 'black');
    } else {
        jQuery(row).find('td:eq(1)').css('color', 'green');
    }
}
Much cleaner! Thank you Charles! :-)

Inline demo of the example above #

BrandBrand TypeColorPhotoAttachmentsPriceLicence PlateCategoryFuel TypeMileageEngine CapacityNo Cylinders
BrandBrand TypeColorPhotoAttachmentsPriceLicence PlateCategoryFuel TypeMileageEngine CapacityNo Cylinders

Adding custom renderers with JavaScript #

WP Data Access allows plugin users to write their own responsive renderers.

A simple renderer

{
    "responsive": {
        "details": {
            "renderer": "function(api, rowIdx, columns) { let render_method = jQuery.fn.dataTable.Responsive.renderer.tableAll(); return render_method(api, rowIdx, columns.filter(column => column.hidden && column.data)); }"
        }
    }
}

This example is a one liner that hides all empty responsive columns. I strongly advise to write a separate javascript renderer function using the Code Manager or another tool which allows you to add custom javascript functions to your web pages. The rewritten function above could look like this:

Rewritten using the Code Manager

function my_renderer(api, rowIdx, columns) {
    let render_method = jQuery.fn.dataTable.Responsive.renderer.tableAll();
    return render_method(api, rowIdx, columns.filter(column => column.hidden && column.data));
}

The advanced option can then be rewritten like this

{
	"responsive": {
		"renderer": "function(api, rowIdx, columns) { my_renderer(api, rowIdx, columns); }" 
	}
}

Thanks again to my old friend Charles! :-)

Available options #

jQuery DataTable options are very powerful. I haven’t tested them all. There are just too many combinations.

Here is a link to the jQuery DataTables options page:

The plugin installs extension Responsive by default. To use this extension just select Responsive from the dropdown list for column Output. If you want to use other extensions, you need to add them manually or get the premium version. After that you should be able to use extension options in the same way.

Addtional extensions can be found here:

Contribution #

Have you written some interesting JSON to handle specific or complex tasks? Please share them here! Add a message below. Other plugin users might benefit from your experience.