How to use buttons with jquery-datatables-rails?

Question

I'm trying to add buttons to my DataTable. As instructed in https://github.com/rweng/jquery-datatables-rails I added the dataTables.buttons JS.

My application.js:

//= require jquery
//= require jquery.turbolinks
//= require jquery-ui
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require dataTables/extras/dataTables.buttons
//= require bootstrap
//= require turbolinks
//= require_tree .

I didn't find a CSS in the assets of the gem https://github.com/rweng/jquery-datatables-rails/tree/master/app/assets/stylesheets/dataTables/extras.

Hence my application.css (doesn't contain anything related to buttons) :

*= require jquery-ui
*= require dataTables/src/demo_table_jui
*= require_tree .
*= require_self
*/

In my coffee script I have (mimicking https://datatables.net/extensions/buttons/examples/initialisation/export.html ):

jQuery ->
    $('#rating').dataTable(
            bJQueryUI:       true,
            sPaginationType: "full_numbers",
            iDisplayLength:  100,
            scrollY:         "1000px",
            scrollCollapse:  true,
            dom: 'Bfrtip',
            buttons: [
                'copy', 'excel', 'pdf'
            ]
            )

I'm guessing that I'm missing something silly , like the CSS or something colliding options. When I tried adding javascript_tag ( https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js ) / stylesheet_tag ( https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css ) to the view but that didn't help.

Issue found , firstly I need the following JS : https://cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js (I'm on Mac , might not be needed on other OS). I also added https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css for better looking styling. The real issue was some Coffee script issue , once I saw it worked on a different table and I ruled out all real issues I simply replaced the two tables ID and it worked. — Ohad Dahan, May 10 '16 at 14:50
So I copied the second table initialization , changed the ID to the other table and it worked fine. +1 new Coffee script hater in the world :) — Ohad Dahan, May 10 '16 at 14:51
@KumarAbinash , anyway to flush such issues? I get an error if the indentation is wrong , but for smaller things , any trick I can use? I'm using gvim and Aptana Studio 3 if it helps. — Ohad Dahan, May 10 '16 at 14:55
I use myself & there is a linter for coffeescript, which tells you what's wrong while saving the file itself. I use it and it saves me a lot of time. here is the link https://github.com/kchmck/vim-coffee-script . And for Aptana Studio I guess there's got to some kind of a linter for coffeescript. Try searching. — Kumar, May 10 '16 at 15:14

score 1 · Answer 1 · edited Mar 29 '17 at 14:56

1

Seems you have created the buttons but you still need to show them in the page.

Can you try something like this:

jQuery ->
    table = $("#rating").dataTable(
        bJQueryUI: true,
        sPaginationType: "full_numbers",
        iDisplayLength: 100,
        scrollY: "1000px",
        scrollCollapse: true,
        dom: "Bfrtip",
        buttons: [
            "copy",
            "excel",
            "pdf"
        ]
    )
    table.buttons()
        .container()
        .appendTo( $(".your-div-for-button", table.table().container() ) );

That is, after creating, you append buttons to the body explicitly. Let me know.

edited Mar 29 '17 at 14:56

nyedidikeke

6,899
7
44
59

answered May 07 '16 at 22:59

Kumar

3,116
2
16
24

Didn't help :( I tried also to include all the JS/CSS from the Datatables example and it didn't help. Is it possible my jquery-rails part is missing something? – Ohad Dahan May 10 '16 at 10:15
Issue found , not resolved yet. I think I have some dangling table related tag that caused the issue since I seem to be able to see the buttons in other tables. – Ohad Dahan May 10 '16 at 10:32

How to use buttons with jquery-datatables-rails?

1 Answers1