I'm using jQuery DataTables plugin and Bootstrap on my rails site. I can't get my custom button and other table header elements to nest in the same row, They are stacked instead of being inline.
Any suggestions to get them all on the same line?
Here is some of the JavaScript I've used:
$(document).ready(function() {
$('#products').DataTable( {
dom: 'Blfrtip',
buttons: [ {
text: 'Pull my products',
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
}]
});
});
This is the most confusing part with using Bootstrap style for jQuery DataTables and it's undocumented so far. Bootstrap extension overrides default dom
which can be confirmed by viewing its source code.
You have to use specially crafted dom
option similar to shown below:
dom:
"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
You can be as creative as you want by using Bootstrap row
and col-*
classes in the dom
option.
See this jsFiddle for code and demonstration.
You can also use direct insertion method as shown in this example because default dom
option used for Bootstrap styling is quite complex.
var table = $('#example').DataTable({
initComplete: function(){
var api = this.api();
new $.fn.dataTable.Buttons(api, {
buttons: [
{
text: 'Pull my products',
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
}
]
});
api.buttons().container().appendTo( '#' + api.table().container().id + ' .col-sm-6:eq(0)' );
}
});
Note that code differs from the example referenced above because there is an issue with DataTables 1.10.9 preventing direct insertion of buttons if there is no B
character in dom
option or dom
option is not specified.
See this jsFiddle for code and demonstration.
In my case I just added these styles:
.dataTables_length,.dataTables_filter {
margin-left: 10px;
float: right;
}
You have to put two divs: one for the datatable buttons and other for your custom code
var table = $("#tbl_oferta").dataTable({
dom: '<"pime-grid-button"B><"pime-grid-filter">frtip',
...
});
$("div.pime-grid-filter").html('<b>Custom tool bar! Text/images etc.</b>');
Then define div class in your css:
.pime-grid-button{float:left}
.pime-grid-filter{float:left;margin-left:10px}
Sample Image
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With