Monday 17 November 2014

Datatables in a bootstrap 3 modal window

Datatables is an important javascript plugin for jQuery to improve behaviour of our website tables.

Recently I saw that using tables (datatables tables) in a bootstrap modal window, after init the table, part of table was shown outside of the window.

I'm using version 1.9.3 of datatables, version 1.10.2 of jQuery and versio 3.0.1 of bootstrap.

My solution was use "fnDrawCallback" function in order to change the window's size after "drawing" the table:

tableObject = $('#idTable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "ajaxSource",
"fnDrawCallback": function( oSettings ) {
$('#idTable').find('.modal-dialog').css(
{
width:'auto',
height:'auto',
'max-height':'100%'
});
},
'aaSorting': [[ 0, "asc" ]]
});


Kind regards!

No comments:

Post a Comment