DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Unable to add options to datatables in ruby 5 app

Unable to add options to datatables in ruby 5 app

warrejtwarrejt Posts: 6Questions: 1Answers: 0
in Free community support

Rails 5.1.6 and Ruby 2.4.1

While my table is somewhat styled using bootstrap 4, I have been unable to add any custom options to my table (buttons, colReorder, etc).

coffeescript:

$ ->
  $('#results_datatable').DataTable
      buttons: [
        'copyHtml5'
        'excelHtml5'
        'csvHtml5'
        'pdfHtml5']
      destroy: true 
      JQueryUI: true
      colReorder: true
      scrollY: "400px"
      sorting: [[ 0, 'asc' ]]

application.js:

//= require jquery3
//= require jquery_ujs
//= require jquery-ui
//= require popper
//= require bootstrap
//= require bootstrap-sprockets
//= require turbolinks
//= require datatables
//= require_tree .

application.scss:

@import "jquery-ui";
@import "font-awesome";
@import "bootstrap";
@import 'datatables';

I've used the datatables library before, but never with coffeescript, and never in a RoR app (new to ruby as well), so it's entirely possible my problem could be because of one (or more) of the above files. Or maybe I'm missing an important gem? I've also added CDN's (buttons in particular) directly in the <head> tags and it had no effect. What is especially odd is the table responds to the scrollY and sorting options, but not to anything else....

Any help is appreciated! Thanks.

Answers

  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin

    Can you link to a page showing the issue, or use the debugger please?

    Thanks,
    Allan

  • warrejtwarrejt Posts: 6Questions: 1Answers: 0
    edited May 2018

    Debugger results available - https://debug.datatables.net/asefih

    Buttons are installed, and I think I'm loading them correctly. Coffeescript compiles to:

    $(function() {
  return $('#results_datatable').DataTable({
    buttons: ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'],
    destroy: true,
    JQueryUI: true,
    colReorder: true,
    scrollY: "400px",
    sorting: [[0, 'asc']]
  });
});
  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin

    The colReorder parameter won't be don't anything as the ColReorder library isn't installed.

    The buttons parameter will be activating buttons, but unless you are using dom or buttons().container() to insert the buttons into the document somewhere, then you won't be able to see them. Documentation for that is here.

    The sorting parameter should be called order and JQueryUI should be jQueryUI, although note that it is deprecated and will be removed in future.

    ALlan

  • warrejtwarrejt Posts: 6Questions: 1Answers: 0

    Several issues - link to debugger -> https://debug.datatables.net/emosoc

    I don't know why the debugger says colReorder isn't installed (caching?). See scss and js below. When I drag a column and drop it into place, it gives me the following error in the console - 'Uncaught TypeError: this.s.dt.oInstance.fnColReorder is not a function'

    Also, none of the buttons appear. And when I add the 'print' button, it says 'Uncaught Unknown button type: print'

    coffeescript:

    $ ->
    $('#results_datatable').DataTable
        dom: 'lfBtip'
        buttons: ['csv' 
            'pdf' 
            'copy']
        destroy: true 
        jQueryUI: true
        colReorder: true
        scrollY: "400px"
        sorting: [[4, "dsc"]]

    js

    //Core component
//= require datatables/jquery.dataTables
//Bootstrap4 theme
//= require datatables/dataTables.bootstrap4

//Optional Datatables extensions -- add below
//= require datatables/extensions/Responsive/dataTables.responsive
//= require datatables/extensions/Responsive/responsive.bootstrap4
//= require datatables/extensions/Buttons/dataTables.buttons
//= require datatables/extensions/Buttons/buttons.html5
//= require datatables/extensions/Buttons/buttons.print
//= require datatables/extensions/Buttons/buttons.flash
//= require datatables/extensions/Buttons/buttons.bootstrap4
//= require datatables/extensions/Buttons/buttons.colVis
//= require datatables/extensions/ColReorder/dataTables.colReorder
//= require datatables/extensions/FixedHeader/dataTables.fixedHeader.js

    scss:

    @import 'datatables/dataTables.bootstrap4';
@import 'datatables/extensions/Responsive/responsive.dataTables';
@import 'datatables/extensions/Responsive/responsive.bootstrap4';
@import 'datatables/extensions/Buttons/buttons.dataTables';
@import 'datatables/extensions/Buttons/buttons.bootstrap4';
@import 'datatables/extensions/ColReorder/colReorder.bootstrap4';
@import 'datatables/extensions/FixedHeader/fixedHeader.bootstrap4';
  • warrejtwarrejt Posts: 6Questions: 1Answers: 0

    Is it a question of require and imports not in the correct order??

  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin

    Are you able to give me a link to the page please? The information above looks like it should work, but perhaps something isn't resolving - I'm not sure.

    Allan

  • warrejtwarrejt Posts: 6Questions: 1Answers: 0

    I can't send a link, it's hosted locally for now.... any ideas?

  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin

    Can you publish it on the web somewhere? Or perhaps create a JSFiddle showing the issue?

    Allan

  • warrejtwarrejt Posts: 6Questions: 1Answers: 0
    edited May 2018

    So I've converted the coffeescript to javascript and still no luck. JSFiddle here - https://jsfiddle.net/3v63jj0x/8/

    Tried including the cdn for buttons and colReorder. I've used the datatables library pretty extensively in the past (but never on a rails project) and nothing is working correctly it seems....

    Thanks for the help!

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.