CODEWITHSUNDEEP
jquerytwitter-bootstrapdatatablesdatatables-1.10
ToddT
ToddT

Reputation: 3258

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

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

Upvotes: 34

Views: 44642

Answers (8)

poonam
poonam

Reputation: 1

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; }

Upvotes: 0

Nazim
Nazim

Reputation: 1

In My case, I just added this CSS

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

Upvotes: 0

JamesH
JamesH

Reputation: 11

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; 
 }

Upvotes: 0

Dima L.
Dima L.

Reputation: 3583

In my case I just added these styles:

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

Upvotes: 9

Gyrocode.com
Gyrocode.com

Reputation: 58880

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.

Upvotes: 78

Felix Bagur
Felix Bagur

Reputation: 31

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

Upvotes: 1

raduation
raduation

Reputation: 792

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

Upvotes: -3

Asad Ali
Asad Ali

Reputation: 660

Have a look at documentation of DataTable Here.

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

Upvotes: -3

Related Questions