responsive.recalc()

Since: Responsive 1.0.1

Recalculate the widths used by responsive after a change in the display. Please note - this property requires the Responsive extension for DataTables.

Description

If a table is initialised while it is hidden (i.e. display: none) the browser will not calculate the width of columns (since the non-displayed element has no width!). As such, Responsive's calculations for which columns to show at the various widths will be incorrect in this situation.

To resolve this problem, this method is made available to trigger a recalculation of the column widths used by Responsive. Call it once the table is made visible to have Responsive display correctly.

It is worth noting that in many ways this method is similar to columns.adjust() and you will likely wish to use both together (see examples below).

Type

function responsive.recalc()

Description:

Recalculate the widths used by responsive after a change in the display

Returns:

DataTables API instance

Examples

Recalculate the responsive actions once the table is made visible:

var table = $('#example').DataTable();

$('#example').css( 'display', 'table' );

table.responsive.recalc();

Use columns.adjust() and responsive.recalc():

$('#example').DataTable()
	.columns.adjust()
	.responsive.recalc();