Global datatable initialisation for simple tables

singhmss

I have been using DataTables to create a lot of simple reports that use ajax data source objects. With the traditional initialisation, every table column has to be defined in a columns property in order to map it to the required property in the ajax datasource. Also some of the columns (like dates, times, decimals etc) require formatting which can be handled by setting the render property of the column. This setup can become quite repetitive. To simplify the initialisation I used a global function to initialise all of my datatables. Below is an overview of my approach.

I started using data-data to map the properties from the ajax data source to table columns (https://datatables.net/examples/advanced_init/html5-data-options.html). This eliminated the need to define each column in the datatable initialisation. I also set data-name to facilitate programmatic access to columns by name (eg: postion:name, as opposed to index) if required.

Functions for renderers cannot be set using the data-* attributes. My approach is to set specific css classes on the columns that require a particular renderer. Then in the datatable table initialiser, columnDefs can be set up to target the classes and assign the corresponding renderers.

Below is a sample of this approach.
https://live.datatables.net/xarugequ/1/edit

singhmss

An update to the sample. I had missed placing the datatable initialisation in a separate function.
https://live.datatables.net/doyiwive/1/edit

rf1234

Pretty cool approach. Thanks for sharing!