EnhanceDataTable
Documentation v0.2.1

Introduction

EnhanceDataTable (EDT) is a DataTables plugin that provides a set of useful methods and functionalities to deal with data retrieving, updating, filtering, finding, and etc. EDT inherits all the properties from DataTables.

Version : Beta v0.2.1
Features
  • New Buttons 'reload', 'cardview'
  • Three states sort Ascending > Descending > Original
  • Built-In Functions Show Row Number, Show Checkbox
  • Useful Methods getSelectedRowIds(), getSelectedRowDatas(), and etc
Dependencies
  • DataTables - With following extensions included ( Warmly Reminder : It is encouraged to include all extensions in the sake of missing any functionalities. )
    • Buttons
    • Column Visibilty
    • HTML5 Export
    • HTML5 JSZip
    • pdfmake
    • Print View
    • DateTime
    • Scroller
    • SearchBuilder
    • SearchPanes
    • Select
  • order.neutral() - DataTables Plug-ins
  • datetime - DataTables Plug-ins
  • jQuery - Version 3.+
  • Lodash
  • Moment.js
Recommended Plugins
Get Started

Include EnhanceDataTable library after DataTables library.

<link rel="stylesheet" href="path-to-DataTables/datatables.min.css" type="text/css" />
<script type="text/javascript" src="path-to-DataTables/datatables.min.js"></script>
<!-- ## Remember to include all DataTables related libraries and other necessary dependency libraries ## -->

<link rel="stylesheet" href="path-to-EnhanceDataTable/EnhanceDataTable.css" type="text/css" />
<script type="text/javascript" src="path-to-EnhanceDataTable/EnhanceDataTable.js">

Sample

Default Layout - Bootstrap 5
Column1 Column2 Column3 Column4 Column5
Result ...

// Init EnhanceDataTable const $DataTable = new EnhanceDataTable({ id: '#DataTable', show_checkbox: true, rowReorder: true, autoWidth: false, order: [], columns: [ { data: 'column1', width: '20%', }, { data: 'column2', width: '20%', }, { data: 'column3', width: '20%', }, { data: 'column4', width: '20%', }, { data: 'column5', }, ], }); // Insert data const data = []; for (let index = 0; index < 1000; index++) { data.push({ // NOTE: must provide 'rowNumber' if 'show_row_number = true' rowNumber : '', checkbox : false, id : index + 1, column1 : `data column1 ${index + 1}`, column2 : `data column2 ${index + 1}`, column3 : `data column3 ${index + 1}`, column4 : `data column4 ${index + 1}`, column5 : `data column5 ${index + 1}`, }); } $DataTable.updateData(data);
Custom Layout - Bootstrap 5
Column1 Colspan1 Colspan2
Custom Date Format Column3 Column4 Column5

// Init EnhanceDataTable new EnhanceDataTable({ id: '#DataTable_Custom', autoWidth: false, order: [], language: { info : 'Showing _START_ to _END_ of _TOTAL_ rows', infoFiltered: '', lengthMenu : '_MENU_ rows per page', paginate: { previous: '', next : '', } }, lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, 'All'], ], columns: [ { data: 'column1', width: '20%', }, { data: 'column2', width: '20%', render: function(data, type, row, meta) { const process_date = moment(data).format('YYYY-MM-DD'); return $DataTable_Custom.getView() == 'card' ? ` ${process_date}` : process_date; }, }, { data: 'column3', width: '20%', }, { data: 'column4', width: '20%', }, { data: 'column5', }, ], column_hide_in_card: [ 2, // Column2 3, // Column3 ], dom: `<'row' <'col-sm-6' <'dt-custom-search'f> > <'col-sm-6' <'dt-custom-buttons'B> > > <'row' <'col-sm-12'tr> > <'row' <'col-sm-5' <'dt-custom-paging'il> > <'col-sm-7'p> >`, buttons: [ { extend : 'reload', text : '', titleAttr : 'Reload', }, { extend : 'colvis', text : 'Toggle Column', titleAttr : 'Show/Hide Column', columns : ':not(.column-row-number)', align : 'button-right', postfixButtons: [ 'colvisRestore' ], }, { extend : 'cardview', text : ` `, titleAttr : 'Toggle Table/Card', }, ], });
Simple Layout - Bootstrap 5
Column1 Custom Date Format Column3 Column4 Column5
Result ...

// Init EnhanceDataTable new EnhanceDataTable({ id: '#DataTable_Simple', show_row_number: false, show_checkbox: true, autoWidth: false, order: [], language: { lengthMenu: 'Items per page _MENU_', paginate: { previous: '', next : '', } }, columns: [ { data: 'column1', render: function(data, type, row, meta) { return `
${data}
`; }, }, { data: 'column2', sortable: false, width: '15%', }, { data: 'column3', sortable: false, width: '15%', }, { data: 'column4', sortable: false, width: '15%', }, { data: 'column5', sortable: false, width: '15%', }, ], dom: `<'row' <'col-sm-12'tr> > <'row mt-2 mb-3' <'col-sm-12 col-md-2 _border'> <'col-sm-12 col-md-8 _border' <'text-center'p> > <'col-sm-12 col-md-2 pe-2 _border' <'h-100 d-flex align-items-center justify-content-end me-2'l> > >`, });
Simple Layout - Draw Data (Using Template Snippet)
Column1 Custom Date Format Column3 Column4 Column5
Result ...

// Init EnhanceDataTable const $DataTable_DrawData = new EnhanceDataTable({ id: '#DataTable_DrawData', show_row_number: false, checked_visible_only: true, enable_checkbox_event: true, checkbox_header_class: '.my-checkbox-header', checkbox_class: '.my-checkbox', bInfo: false, autoWidth: false, order: [], columnDefs: [ { orderable: false, targets: [0, 3, 4, 5] }, ], select: { style: 'multiple', selector: 'td:first-child input[type="checkbox"]' }, language: { lengthMenu: 'Items per page _MENU_', paginate: { previous: '', next : '', } }, columns: [ { searchable: false, orderable : false, sortable : false, width : 21, }, { width: 'auto', }, { width: '15%', }, { width: '15%', }, { width: '15%', }, { width: '15%', }, ], dom: 'rt<"bottom"lp><"clear">', }); // Render HTML template with data variables. const renderHtml = function (selector, data) { // Initialize template parser var render = TemplateSnippet($(selector).html()); // Return rendered data return render(data); } // Draw data using template-snippet if ($DataTable_DrawData.hasOwnProperty('dataTable')) { let draw_today_date = moment().format('YYYY-MM-DD'); let template_array = []; for (let i = 0; i < 1000; i++) { let id = i + 1; const template = $(renderHtml('#dt_row_template', { id: `data-id-${id}`, custom_date: draw_today_date, })); template_array.push(template[0]); draw_today_date = moment(draw_today_date).add(1, 'days').format('YYYY-MM-DD'); } $DataTable_DrawData.updateData(template_array); }

// Init EnhanceDataTable new EnhanceDataTable({ id: '#DataTable_StickyHeader', show_row_number: false, autoWidth: false, paging: false, sticky_header: true, columns: [ { data: 'column1', width: 'auto', }, { data: 'column2', width: '15%', }, { data: 'column3', width: '15%', }, { data: 'column4', width: '15%', }, { data: 'column5', width: '15%', }, ], dom: 'tr', });

Issue:

  1. Cardview sometimes render Date-Format failed due to data changed with .cardview-col-header included, 24 Mar 2023

Milestone:

  • -

Property

Description

Two new buttons:

  1. 'reload' - Reload data button.
  2. 'cardview' - Toggle view button. (Table view / Card vieww)

Example
new EnhanceDataTable({ buttons: [ 'reload', 'cardview', ], });

Description

Columns which will be hide when turns into card view, and show again then turns into table view. Those hidden columns still able to show out by toggle the column visibilty.

Types

Array

Default

[ ]

Example
new EnhanceDataTable({ column_hide_in_card: [ 1, // index of column two 2, // index of column three ], });

Description

Three states sorting. [ Ascending > Descending > Original ]

Types

Boolean

Default

true

Example
new EnhanceDataTable({ three_states_sort: true, });

Description

Show built-in row number column.

Types

Boolean

Default

true

Example
new EnhanceDataTable({ show_row_number: true, });

Description

Show built-in row reorder column.

Types

Boolean

Default

false

Example
new EnhanceDataTable({ show_row_reorder: false, });

Description

Show built-in checkbox column.

Types

Boolean

Default

false

Example
new EnhanceDataTable({ show_checkbox: false, });

Description

'Check/Un-Check All' only apply to visible checkboxes.

Types

Boolean

Default

false

Example
new EnhanceDataTable({ checked_visible_only: false, });

Description

Enable built-in checkbox event listener on custom checkbox.

Types

Boolean

Default

false

Example
new EnhanceDataTable({ enable_checkbox_event: false, });

Description

Make the thead become 'position: sticky;' with default 'top: 0px;'.

Types

Boolean

Default

false

Example
new EnhanceDataTable({ sticky_header: false, });

Description

Checkbox header class.

Types

String

Default

'.column-checkbox-header'

Example
new EnhanceDataTable({ checkbox_header_class: '.column-checkbox-header', });

Description

Checkbox class.

Types

String

Default

'.column-checkbox'

Example
new EnhanceDataTable({ checkbox_class: '.column-checkbox', });

Description

Row Reorder header class.

Types

String

Default

'.column-rowReorder-header'

Example
new EnhanceDataTable({ rowreorder_header_class: '.column-rowReorder-header', });

Description

Row Reorder class.

Types

String

Default

'.column-rowReorder'

Example
new EnhanceDataTable({ rowreorder_class: '.column-rowReorder', });

Method

Description

Get Ajax URL of DataTables.

Example
const dt = new EnhanceDataTable({ ajax: { url: 'data.php', } }); window.alert('Ajax URL:' + dt.getAjaxUrl());

Description

Set Ajax URL of DataTables.

Parameter
Name Type Optional Description
1 url string Yes New Ajax URL.
Example
const dt = new EnhanceDataTable({ ajax: { url: 'data.php', } }); dt.setAjaxUrl('new_data.php');

Description

Get current view DataTables.

Example
const dt = new EnhanceDataTable(); window.alert('Current view:' + dt.getView());

Description

Set DataTables view.

Parameter
Name Type Default Optional Description
1 view string 'table' Yes View to set.
Example
const dt = new EnhanceDataTable(); dt.setView('card');

Description

Toggle between 'table' and 'card' view.

Example
const dt = new EnhanceDataTable(); dt.toggleView();

Description

Get all rows.

Returns

Array of all rows loaded in the DataTable. 'all' to get all rows; 'filtered' to get only filtered rows.

Example
const dt = new EnhanceDataTable(); dt.getRows();

Description

Get data of a row.

Parameter
Name Type Description
1 view string|number Row index.
Returns

Data object specified by row index.

Example
const dt = new EnhanceDataTable(); // get data of first row. dt.getRowData(0);

Description

Get ID of selected rows.

Parameter
Name Type Default Optional Description
1 rowSelector string '.selected' Yes Row selector.
Returns

Array of selected rows ID.

Example
const dt = new EnhanceDataTable(); // get all selected row IDs. dt.getSelectedRowIds(); // get all visible and selected row IDs. dt.getSelectedRowIds('.selected:visible');

Description

Get data of selected rows.

Parameter
Name Type Default Optional Description
1 rowSelector string '.selected' Yes Row selector.
Returns

Array of selected rows data.

Example
const dt = new EnhanceDataTable(); // get all selected row Datas. dt.getSelectedRowDatas(); // get all visible and selected row Datas. dt.getSelectedRowDatas('.selected:visible');

Description

Reload DataTable data.

Parameter
Name Type Default Optional Description
1 callback function null Yes Function which is executed when the data has been reloaded and the table fully redrawn.
2 resetPaging boolean true Yes Reset or hold the current paging position.
Example
const dt = new EnhanceDataTable(); dt.refresh();

Description

Register DataTable events listener. Refer to on().

Example
const dt = new EnhanceDataTable(); dt.on();

Description

Update data.

Parameter
Name Type Default Optional Description
1 data Array of object New data.
2 resetPaging boolean true Yes Reset or hold the current paging position.
Example
const dt = new EnhanceDataTable(); dt.updateData([ { /* 1st data object */ }, { /* 2nd data object */ }, { /* and so on */ }, ]);

Description

Clear data.

Example
const dt = new EnhanceDataTable(); dt.clearData();

Description

Restore the order in which data was read into a DataTable.

Example
const dt = new EnhanceDataTable(); dt.resetOrder();

Description

Select a row.

Parameter
Name Type Description
1 view string|number Row index.
Example
const dt = new EnhanceDataTable(); // select first row dt.select(0);

Description

Deselect a row.

Parameter
Name Type Description
1 view string|number Row index.
Example
const dt = new EnhanceDataTable(); // deselect first row dt.deselect(0);

Event

Description

Toggle view event - fired when DataTables view changes.

Type
Parameter Description
1 e Custom event object.
Example
const dt = new EnhanceDataTable(); // deselect first row dt.on('toggleView', function(e) { window.alert(`Current view: ${e.detail.view}`); });