Losing jquery styling when specifiying dom options

kvickery

I am adding Buttons to my DataTable as shown below. All is good, except as soon as I add the "dom" options (to get rid of the default page length changer) the jquery styling of the header is gone - so the header is just a white background. How can I retain the jquery styling when specifying "dom" options?

var transactions = $('#Transactions').DataTable({
    "dom": '<"toolbar">"frtip',
    "bJQueryUI": true,
        buttons: ['pageLength',
          { extend: 'colvis',
            columns: ':not(.noColvis)',
            postfixButtons: [{extend:'columnToggle',
                              text:'Toggle multiple',
                              columns:'.hideInitial'
                             }]
          }]
      });

transactions.buttons().container().prependTo( transactions.table().container() );

kvickery

Solved my own problem. Just needed to add in the H and F options into the DOM so that the header and footer were included. Also added in the B option to position the buttons within the header - so no need for the container prepend after.

var transactions = $('#Transactions').DataTable({
    "dom": '<"H"Bf>rt<"F"irp>',
    "bJQueryUI": true,
        buttons: ['pageLength',
          { extend: 'colvis',
            columns: ':not(.noColvis)',
            postfixButtons: [{extend:'columnToggle',
                              text:'Toggle multiple',
                              columns:'.hideInitial'
                             }]
          }]
      });

allan

Thanks for posting back - good to hear you've got it working!

The dom option is a pain for certain. I'm going to address that in the next major version.

Allan