Modal on non-responsive table

Modal on non-responsive table

cherryscherrys Posts: 1Questions: 1Answers: 0


Using the responsive.details.display option, we are able to get a bootstrap modal for each row.

$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal( {
header: function ( row ) {
var data =;
return 'Details for '+data[0]+' '+data[1];
} ),
renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
tableClass: 'table'
} )
} );
} );

Is there a way to create a bootstrap modal for rows without making the table responsive?

Kind regards,
Steve C

This question has an accepted answers - jump to answer


  • kthorngrenkthorngren Posts: 18,249Questions: 25Answers: 4,335
    Answer ✓

    Yes. If, for example, you want to click on a row then have it show in a modal you can start with this example. It shows how to get the row data of the clicked row. You can then do what you want like show a BS modal.


Sign In or Register to comment.