newbie, trying to get table tools to work.

DacHoliday

working with rails, utilized a lot of multi-tab tables, this one doesn't need the tabs, but I like the appearance and hope to keep it..
installed the jquery-datatables-rails gem.
all requires are there...
the buttons actually worked once, but have disappeared.
I've tried a lot of conf with dom and swfpath..still confused about that, no matter what I read swfpath leads to a blank file..

my JS is
$(document).ready(function() {
$("#tabs").tabs( {
"activate": function(event, ui) {
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
}
} );

$('queries').dataTable( {
"sScrollY": "400px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"retrieve": true,
"aoColumnDefs": [
{ "sWidth": "10%", "aTargets": [ -1 ] }
]
responsive: true,
tableTools: {
sSwfPath: "/assets/dataTables/extras/swf/copy_csv_xls_pdf.swf"
},
dom: "B<'row'<'small-4 columns'l><'small-4 columns'f><'small-4 columns'T>r>"+
"t"+
"<'row'<'small-6 columns'i><'small-6 columns'p>>"
} );
});

and the table from my view opens up like this..

<

table cellpadding="0" cellspacing="0" border="0" class="display responsive no-wrap" id="queries">

allan

Don't use TableTools. As its documentation notes it is retired software and has now been replaced by Buttons. Use Buttons' HTML5 export options. It is much easier.

Allan

DacHoliday

I've tried using bower_component and npm installed versions of datatables, and datatable buttons, all correct syntax, no errors on the console at all. utilized the buttons: ['print'],
but still doesn't appear at all.

thanks though

DacHoliday

I speculate that the reason rendering is being disrupted by one error. I'll get the pop up 'can't reinitialize datatable id='example', on every page, multiple times.
unless i implement retrieve: 'true'

i'll post a sample js

DacHoliday

$(document).ready(function() {
$("#tabs").tabs( {
"activate": function(event, ui) {
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
}
} );

$('table.display').dataTable( {
"sScrollY": "400px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"retrieve": true,
"aoColumnDefs": [
{ "sWidth": "10%", "aTargets": [ -1 ] }
],

 dom: 'Bfrtip',
 buttons: [
        'copy', 'excel', 'pdf'
    ]

} );
} );

allan

I'd need a link to a page showing the issue to be able to offer any help. The code you have above looks like it should show the buttons.

Allan

DacHoliday

will pm you

allan

Could you just PM me the user / pass please? Click my name above and then the "Send message" button.

Thanks,
Allan

allan

Thanks for the details by PM (and keeping the server online!).

Two issues I can see:

1) The button definition files aren't being loaded. Currently for DataTables you are loading:

datatables.net/js/jquery.dataTables
datatables.net-zf/js/dataTables.foundation
datatables.net-buttons/js/dataTables.buttons
datatables.net-buttons-zf/js/buttons.foundation

You need to include buttons.print.js if you want the print button (&c. for the other button types).

2) Your DataTables initialisation is:

{
    "sScrollY": "400px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "retrieve": true,
    "aoColumnDefs": [{
        "sWidth": "10%",
        "aTargets": "-- Previously seen object. Not included due to circular reference possibility --"
    }],
    "bRetrieve": true
}

It doesn't include Buttons at all. See the Buttons documentation for how to use Buttons.

A possible third issue is that the combination of both jQuery UI and Zurb on the same page may cause styling conflicts, but it won't cause any issues with the functionality of the buttons once they are working.

Regards,
Allan

DacHoliday

Thanks a ton for checking in on this! your a great help.

I do actually have the buttons: configured in my JS for queries.js, which makes me think this page is rendering another table..

i caught and added the buttons.print.js to my application.js..
renamed my #tabs div and #table.display to match the new table name..

just copied and paste the basic initialization from the site..
heres the latest config for the queries.js

  1 $(document).ready(function() {
  2  $("#tabs_query").tabs( {
  3   "activate": function(event, ui) {
  4    var table = $.fn.dataTable.fnTables(true);
  5     if ( table.length > 0 ) {
  6      $(table).dataTable().fnAdjustColumnSizing();
  7       }
  8       }
  9       } );
 10 ••••••
 11   $('#queries').dataTable( {
 12    "sScrollY": "400px",    
 13     "bScrollCollapse": true,
 14     "bPaginate": false,    
 15     "bJQueryUI": true,     
 16     "retrieve": true,      
 17     "aoColumnDefs": [
 18     { "sWidth": "10%", "aTargets": [ -1 ] }
 19     ],  
 20     "dom": Bfrtip,
 21 "buttons": ['print']
 22 } );
 23 } );
 24 ••••

DacHoliday

heres my application.js

 13 //= require jquery
 14 //= require jquery_ujs
 15 //= require jquery-ui
 16 //= require datatables.net/js/jquery.dataTables
 17 //= require datatables.net-zf/js/dataTables.foundation
 18 //= require datatables.net-buttons/js/dataTables.buttons
 19 //= require datatables.net-buttons/js/buttons.flash.js
 20 //= require datatables.net-buttons/js/buttons.print.js
 21 //= require datatables.net-buttons-zf/js/buttons.foundation
 22 //= require foundation
 23 //= require jquery.minicolors
 24 //= require jquery.minicolors.simple_form
 25 //= require jquery-ui/datepicker
 26 //= require cocoon
 27 //= require_tree .
 28 //
 29 $(function(){ $(document).foundation(); });
 30 
 31 window.setTimeout(function() {
 32       $(".alert-box-notice").fadeTo(500, 0).slideUp(500, function(){
 33                 $(this).remove();•
 34                     });
 35 }, 5000);
 36 window.setTimeout(function() {
 37       $(".alert-box-success").fadeTo(500, 0).slideUp(500, function(){
 38                 $(this).remove();•
 39                     });
 40 }, 5000);
 41 window.setTimeout(function() {
 42       $(".alert-box-alert").fadeTo(500, 0).slideUp(500, function(){
 43                 $(this).remove();•
 44                     });
 45 }, 5000);
 46 
 47 $(document).ready(function(){
 48   $('input.datepicker').datepicker({changeYear: true,
 49   dateFormat: 'yy-mm-dd'});
 50 });
~         

DacHoliday

heres my application.css

 13  *= require_tree .
 14  *= require_self
 15  *= require datatables.net-zf/css/dataTables.foundation
 16  *= require datatables.net-buttons-zf/css/buttons.foundation
 17  *= require jquery-ui
 18  *= require foundation
 19  *= require foundation_and_overrides
 20  *= require jquery.minicolors
 21 
 22  */
 23 #queries_wrapper.dataTables_wrapper select[name=queries_length] {
 24   width: auto;
 25 }•
~      

DacHoliday

heres the table rendered..

 10 <div id="queries_table">
 11 <div id="tabs_query">
 12 <ul>
 13   <li><a href="#tabs-1">Search Results (<%= @results.count %>)</a></li>
 14 </ul>
 15 
 16 <div id="tabs-1">
 17 <table cellpadding="0" cellspacing="0" border="0" class="display responsive nowrap" id="queries">
 18     <thead>
 19       <tr>
 20       <th>Teacher</th>
 21       <th>Reason</th>
 22       <th>Dates of absence</th>
 23       <th>Periods</th>
 24       <th>Lunch</th>
 25       <th>Substitute</th>
 26     </tr>
 27   </thead>
 28 
 29   <tbody>
 30 
 31   <% @results.each do |request| %>
 32 
 33       <tr>
 34         <td><%= request.user.first_name %> <%= request.user.last_name %></td>
 35         <td><%= request.reason %></td>
 36         <td><%= request.dates_of_absence.strftime("%b %d, %Y") %></td>
 37         <td><%= request.periods %></td>
 38         <td><%= request.lunch %></td>
 39         <td><%= User.find_sub_name(request) %></td>
 40       <% end %>
 41       </tr>•
 42       </tbody>
 43     </table>
 44   </div>
 45 </div>
 46 </div>
 47 <%= link_to 'Edit', edit_query_path(@query), :class => 'button info' %>•

allan

Unfortunately the server appears to be offline again. I'll try to take a look at it again later on.

Allan

DacHoliday

I've got the server back up, will leave the test server running until this gets resolved. thanks!

allan

Looks to still be the same. The table's initialisation does not include Buttons. This is the debug trace. Click the "Tables" button and then the "Initialisation options" option. You will be able to see that Buttons isn't used there.

Have a look at this example which shows how Buttons can be used with jQuery UI.

Allan

DacHoliday

tried, the jquery ui, still nothing. really can't figure this out..

allan

It appears the issue is that you have multiple DataTables initialisations. For example in all three of mail_groups.self, requests.self and users.self there is:

$('table.display').dataTable( {
  ...
} );

In queries.self where you are actually trying to add Buttons, that appears to be correctly setup (although the dom options used won't make for a nice looking jQuery UI styled table) but that code is executing after the others.

Since you have used retrieve if just gets the existing table! It doesn't set any options. As retrieve's documentation states:

Note that if the table has already been initialised, this parameter will cause DataTables to simply return the object that has already been set up - it will not take account of any changes you might have made to the initialisation object passed to DataTables (setting this parameter to true is an acknowledgement that you understand this!).

So the solution might be to just make your other DataTables initialisations more selective.

Allan

DacHoliday

that was it! print button showed up!

now all I haven left to deal with is why my rows aren't being limited anymore, will start another forum for that
thanks again!