Datatable styling so bootstrap button appears on same row as other elements

Question

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' );
      }
    }]
  });
});

CSS `white-space: nowrap;`? – Roamer-1888 Aug 27 '15 at 14:51 — Roamer-1888, Aug 27 '15 at 14:51

Gyrocode.com · Accepted Answer · 2017-05-19T02:41:55.693

78

SOLUTION #1

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.

SOLUTION #2

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.

edited May 19 '17 at 02:41

answered Aug 27 '15 at 15:19

Gyrocode.com

57,606
14
150
185

3

Wow.. just wow.. Thanks Gyrocode.. totally makes sense, but how in the world did you figure this one out?? One last question.. How do you add in a second custom button on that same line? – ToddT Aug 27 '15 at 15:26
2

@ToddT, had the same problem and figured it out by inspecting the source code of the extension. jQuery DataTables is an excellent library but I wish this part was documented better. – Gyrocode.com Aug 27 '15 at 15:27
Awesome.. How do you add a second custom button to that same line? – ToddT Aug 27 '15 at 15:28
@ToddT, I'm still learning the new features in 1.10.8, but I assume it should be done as in [this jsFiddle](https://jsfiddle.net/vckbwjqb/1/). – Gyrocode.com Aug 27 '15 at 15:31
1

Once again.. thanks so much! I tried that but missed the comma between the two buttons.. – ToddT Aug 27 '15 at 15:35
+1 @Gyrocode.com great stuff, been looking for something like this for a while! Not sure if the docs always displayed this info but it also appears to be in there now under the styling section https://datatables.net/reference/option/dom – Will.Harris Nov 02 '15 at 14:38
Also, because I wanted to use icon buttons I used a slightly different approach. So anybody who is interested see this fiddle... https://jsfiddle.net/vckbwjqb/2/ – Will.Harris Nov 02 '15 at 14:40
@Will.Harris, added more details with proper way to use direct insertion. – Gyrocode.com Nov 02 '15 at 15:11
Thank you very much! This pointed me in the right direction. BTW, if anyone tried this on version 1.10.15 and didn't get it working, then you need to install the Buttons extension which you can find here: https://datatables.net/download/release and, furthermore, to get the buttons to look more Bootstrap-3-like, you need to use the `className` option within the button definition like so: `className: 'btn btn-primary'`. Also, here's the documentation page for buttons in general: https://datatables.net/reference/option/buttons.buttons – racl101 Oct 03 '17 at 21:49
@ToddT, Your example on the jsfiddle worked like a charm for me!! Awesome. Many thanks!! – sunitkatkar Dec 18 '18 at 23:03

score 9 · Answer 2 · answered Sep 11 '19 at 09:12

9

In my case I just added these styles:

.dataTables_length,.dataTables_filter {
    margin-left: 10px;
    float: right;
}

answered Sep 11 '19 at 09:12

Dima L.

3,443
33
30

score 1 · Answer 3 · answered Sep 17 '15 at 09:16

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

score 0 · Answer 4 · answered Aug 30 '20 at 18:57

This is how I did it.

"dom": '<"row"<"col-6"<"d-flex justify-content-start"<""l><"ml-4"i>>><"col-6"<"d-flex justify-content-end"<""f>>>>tp'

Also add some custom CSS to make things appear more inline.

div.dataTables_wrapper div.dataTables_info{
   padding-top: 0.2em !important; 
 }

score 0 · Answer 5 · answered Jun 11 '21 at 14:13

0

In My case, I just added this CSS

.dataTables_wrapper .dataTables_length {
    float:left;
    position: absolute;
}
.dataTables_wrapper .dataTables_filter {
    float: right;
}

answered Jun 11 '21 at 14:13

Nazim

1

score 0 · Answer 6 · edited Apr 23 '22 at 13:19

You can add buttons in toolbar menu like shown below:

        initComplete: function(){
            $("div.toolbar").html('<input type="button");          
        }

then add this toolbar to DOM element of Datatables as shown below:

    dom: "<'row'<'col-sm-2'l><'toolbar'><'col-sm-8'f>>" +
                     "<'row'<'col-sm-12'tr>>" +
                     "<'row'<'col-sm-5'i><'col-sm-7'p>>",

One can align this toolbar using css like below: .toolbar { float: left; margin-left: 60px; }

score -3 · Answer 7 · answered Aug 27 '15 at 14:58

-3

Have a look at documentation of DataTable Here.

try this dom: '<"toolbar">frtip'

answered Aug 27 '15 at 14:58

Asad Ali

640
6
18

Yea even that example stacks the search bar and the text they inserted.. see here http://live.datatables.net/coqisori/1/ – ToddT Aug 27 '15 at 15:05
`.toolbar { float: left; }` add this. it ill work like a charm. – Asad Ali Aug 27 '15 at 15:07
That will not work correctly with Bootstrap styling. Besides you missed the `B` option. – Gyrocode.com Aug 27 '15 at 15:12

score -3 · Answer 8 · answered Aug 27 '15 at 15:03

-3

Put style="display: inline" on the elements you want to display inline.

answered Aug 27 '15 at 15:03

raduation

792
5
11

Sounds good, but how do you attach a class to both a custom button and the items in the header of the Datatables plugin?? – ToddT Aug 27 '15 at 15:07
Why can't you? Post your code so I can see what you mean. – raduation Aug 27 '15 at 15:08

Datatable styling so bootstrap button appears on same row as other elements

8 Answers8

SOLUTION #1

SOLUTION #2

Linked