Bootstrap Modal and responsive datatables

Question

In an XPages application I am using Bootstrap modal and the datatables plugin. On the datatables website I have read to recalculate the responsiveness when loading the table in a Bootstrap modal e.g.:

var table = $('#example').DataTable(); 
$('#example').css( 'display', 'table' );
table.responsive.recalc();

Because I am working with XPages my ID's are dynamic So I have to call a helper function:

var table = x$('#{id:tableObj}').DataTable();
x$('#{id:tableObj}').css( 'display', 'table' );
table.responsive.recalc();

So my final code looks like:

 x$('#{id:bootstrapModal}').modal('show');var table =
 x$('#{id:tableObj}').DataTable();x$('#{id:tableObj}').css( 'display',
 'table' );table.responsive.recalc();

id:tableObj is the id of the xp:table control that resides in a custom control.

The good thing is that it renders the first table in the dialog as a datatables table, but not responsive.

Another bad thing is that only the first table is rendered as a DataTables table, and not other tables (multiple custom controls in the dialog.

What am I doing wrong?

Answer 1

• There is no need to do css( 'display', 'table' ) if #{id:tableObj} is a table.

• In order to make tables responsive you need to include JS/CSS code for Responsive extension and initialize your tables accordingly, see Responsive extension for more details. Make sure to use Download builder to get the latest version.

• If you want to target multiple tables, you need to either use class or table tag name or repeat your initialization code for each table.

• You need to adjust column widths with columns.adjust() and reinitialize Responsive extension with responsive.recalc() only when modal becomes visible.

For example:

// Initialize all tables inside the modal
var table = x$('#{id:bootstrapModal} table').DataTable({
   responsive: true
});

// When modal window is shown
x$('#{id:bootstrapModal}').on('shown.bs.modal', function () {
   // Adjust column width and re-initialize Responsive extension
   x$('#{id:bootstrapModal} table').DataTable()
      .columns.adjust()
      .responsive.recalc();   
});

// Show modal window
x$('#{id:bootstrapModal}').modal('show');