Using dom: 'T' to enable TableTools results in incorrectly formatted tables

R_G

Ruby 2, Rails 4, DataTables 1.10.2, jquery-datatables-rails 3.1.1

I need to initialize TableTools in another one of my tables that was just a standard table to enable multi-row selection. That is causing me a lot of problems.

If I use dom: 'T' to initialize TableTools, a lot of the table formatting is lost. It seems that the wrappers and divs disappear. I have tried to correct that using dom: 'Tlfrtip', dom: 'T<"H"lfr>t<"F"ip>', dom: 'T<"clear">lfrtip', dom: '<"H"Tlfr>t<"F"ip>' and many other permutations. Some help, but nothing really gets me a well-formatted table. I had been using jqueryUI, but set that to false during this process as it was unneeded since I use Bootstrap.

Without TableTools initialized, I get:
Correct formatting:

https://www.dropbox.com/s/rhbwwpown3uibso/Correct%20Formatting.JPG?dl=0

With TableTools initialized, I get:
Poor formatting:

https://www.dropbox.com/s/lntfam0qv2xn7c6/Incorrect%20formatting%20with%20dom%20set%20to%20T.JPG?dl=0

As an alternative, I tried the second format of TableTools direct initialization. This worked great for this particular table and all was well. However, I have two other AJAX tables in this app. One uses multi-row selection with an array. The other is just a standard AJAX table. They both quit working using this form of initialization and displayed no data.

Is there some format of DOM that can help me out here? That would be easiest for me. If I have to use direct initialization, I will have to try a deep debug since I use jquery-datatables-rails.

I do have this up on a link. I will email you information as to how to access it.

Thanks for your help. And, thanks again for such a great tool!

R_G

Not sure why links aren't displaying. They are:

https://www.dropbox.com/s/rhbwwpown3uibso/Correct%20Formatting.JPG?dl=0

https://www.dropbox.com/s/lntfam0qv2xn7c6/Incorrect%20formatting%20with%20dom%20set%20to%20T.JPG?dl=0

allan

Hi,

Thanks for the details! Basically this does indeed come down to the dom string that is being used, but with the added complication of the fact that you are using the Bootstrap integration which defines its own dom string!

That is why it doesn't look quite as expected - your own dom string is overwriting the Bootstrap integration string without putting in any of the required options to show Bootstrap styling.

There are two options:

1. Copy the Bootstrap integration dom option and add in the T for TableTools.
2. Use new $.fn.dataTable.TableTools() to create the TableTools for the table (instead of the tableTools / T options) and insert the buttons where you want. This example shows that with Bootstrap.

Regards,
Allan

R_G

I added this and it works great!

dom: "<'row'<'col-sm-6'l><'col-sm-6'fT>>" +   
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-6'i><'col-sm-6'p>>",
renderer: 'bootstrap',

Thanks for all the code and ALL the help, Allan!