Buttons in Semantic UI doesn't work

pekokFC

Hi,
i'm using Semantic as my themes. But i can't call the buttons method. Is there anything i miss ?

Here are my js load sequence :

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/flot/jquery.flot.js",
        "../node_modules/jquery.flot.tooltip/js/jquery.flot.tooltip.js",
        "../node_modules/flot/jquery.flot.resize.js",
        "../node_modules/flot/jquery.flot.pie.js",
        "../node_modules/flot/jquery.flot.time.js",
        "../node_modules/flot/jquery.flot.categories.js",
        "../node_modules/jquery.flot.spline/jquery.flot.spline.js",
        "../node_modules/jquery-sparkline/jquery.sparkline.js",
        "../node_modules/easy-pie-chart/dist/easypiechart.js",
        "../node_modules/bootstrap/js/modal.js",
        "../node_modules/bootstrap/js/dropdown.js",
        "../node_modules/bootstrap/js/tooltip.js",
        "../node_modules/summernote/dist/summernote.js",
        "../node_modules/jquery-knob/dist/jquery.knob.min.js",
        "../node_modules/blueimp-gallery/js/jquery.blueimp-gallery.min.js",
        "../node_modules/datatables.net/js/jquery.dataTables.js",
        "../node_modules/datatables.net-se/js/dataTables.semanticui.js",
        "../node_modules/semantic-ui/dist/semantic.min.js",
        "../node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
        "../node_modules/datatables.net-buttons-se/js/buttons.semanticui.min.js",
        "../node_modules/datatables.net-buttons/js/buttons.html5.min.js",
        "../node_modules/datatables.net-buttons/js/buttons.print.min.js",
        "../node_modules/datatables.net-buttons/js/buttons.colVis.min.js",
        "app/core/preloader/preloader.js"
      ],

Thank you
Best Regards,

kthorngren

But i can't call the buttons method

Do you get any alerts or errors in your browser's console?

Do the buttons appear on the page?

What is your Datatables and buttons initialization code?

Kevin

pekokFC

The buttons does not appear in the page & i have no errors on my console.

Here are my import script :

import {Component, OnInit, AfterViewInit} from '@angular/core';
import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-buttons';
import 'datatables.net-buttons-se';

And init code :

ngAfterViewInit() {
    this.initDatatable();
  }

  // TODO: make buttons extension work
  private initDatatable(): void {
    const tableId: any = $('#' + this.id);
    this.tableWidget = tableId.DataTable({
      lengthChange: false,
      buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
    });
    this.tableWidget.buttons().containers().appendTo($('div.eight.column:eq(0)', this.tableWidget.table().container()));
    console.log(this.tableWidget.buttons().containers());
  }

Thanks
Best Regards,

kthorngren

Looks like you are using angular, which I'm not familiar with. However to load the excel and pdf buttons you also need to include these JS files:

//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js
//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js

This example will show the files needed:
https://datatables.net/extensions/buttons/examples/styling/semanticui.html

Kevin

pekokFC

Hi Kevin,

Already add the library :

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "app/core/preloader/preloader.js",
        "../node_modules/flot/jquery.flot.js",
        "../node_modules/jquery.flot.tooltip/js/jquery.flot.tooltip.js",
        "../node_modules/flot/jquery.flot.resize.js",
        "../node_modules/flot/jquery.flot.pie.js",
        "../node_modules/flot/jquery.flot.time.js",
        "../node_modules/flot/jquery.flot.categories.js",
        "../node_modules/jquery.flot.spline/jquery.flot.spline.js",
        "../node_modules/jquery-sparkline/jquery.sparkline.js",
        "../node_modules/easy-pie-chart/dist/easypiechart.js",
        "../node_modules/bootstrap/js/modal.js",
        "../node_modules/bootstrap/js/dropdown.js",
        "../node_modules/bootstrap/js/tooltip.js",
        "../node_modules/summernote/dist/summernote.js",
        "../node_modules/jquery-knob/dist/jquery.knob.min.js",
        "../node_modules/blueimp-gallery/js/jquery.blueimp-gallery.min.js",
        "../node_modules/datatables.net/js/jquery.dataTables.js",
        "../node_modules/datatables.net-se/js/dataTables.semanticui.js",
        "../node_modules/semantic-ui/dist/semantic.min.js",
        "../node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
        "../node_modules/datatables.net-buttons-se/js/buttons.semanticui.min.js",
        "../node_modules/jszip/dist/jszip.min.js",
        "../node_modules/pdfmake/build/pdfmake.min.js",
        "../node_modules/pdfmake/build/vfs_fonts.js",
        "../node_modules/datatables.net-buttons/js/buttons.html5.min.js",
        "../node_modules/datatables.net-buttons/js/buttons.print.min.js",
        "../node_modules/datatables.net-buttons/js/buttons.colVis.min.js"
      ],

but, the buttons still doesn't appear.
could you tell me what following code does ?

    this.tableWidget.buttons().containers().appendTo($('div.eight.column:eq(0)', this.tableWidget.table().container()));

i don't think the append work...

Thanks a lot,
Best Regards,
FR

pekokFC

I also got this error when i use colvis :

ERROR Error: Unknown button type: colvis
    at viewWrappedDebugError (core.es5.js:8422)
    at callWithDebugContext (core.es5.js:13477)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:13007)
    at ViewRef_.detectChanges (core.es5.js:10174)
    at core.es5.js:4812
    at Array.forEach (<anonymous>)
    at ApplicationRef_.tick (core.es5.js:4812)
    at core.es5.js:4684
    at ZoneDelegate.invoke (zone.js:392)

Best Regards,

kthorngren

could you tell me what following code does ?

Here are the docs for that code:
https://datatables.net/extensions/buttons/#Direct-insertion

Kevin

pekokFC

hmm... still unable to display the export button even after i use the direct insertion on custom div / class. I got no error on console. Whilst still get the same error when i use colvis in my buttons arrays. *sigh...

ERROR Error: Unknown button type: colvis
    at viewWrappedDebugError (core.es5.js:8422)
    at callWithDebugContext (core.es5.js:13477)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:13007)
    at ViewRef_.detectChanges (core.es5.js:10174)
    at core.es5.js:4812
    at Array.forEach (<anonymous>)
    at ApplicationRef_.tick (core.es5.js:4812)
    at core.es5.js:4684
    at ZoneDelegate.invoke (zone.js:392)
Best Regards,

Any workaround for this case ?
Would be very helpful if this case solved.

Thank you,
Best Regards,

allan

Unknown button type: colvis

You've specified colvis in the list of buttons to show, but not included the buttons.colvis.js file.

Allan

edit

"../node_modules/datatables.net-buttons/js/buttons.colVis.min.js"

Actually, I missed that part. However, that error still suggests that file isn't being included in some way. If you have a link to the page I can check it.

pekokFC

Okay, i'll get back to you asap. I'm having another issue with the deployment. Once it, deployed in staging. I'll share the link.

Thanks,
Best Regards,
FR

pekokFC

Hi Alan,
sorry i can't give u the link yet. I'm still waiting for my supervisor to configure the staging environment. Here is the capture on my local env.

Could you point out on what i'm missing ?

import :

import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-se';
import 'datatables.net-buttons';
import 'datatables.net-buttons-se';

init code :

private initDatatable(): void {
    const tableId: any = $('#' + this.id);
    this.tableWidget = tableId.DataTable({
      // lengthChange: false,
      buttons: [ 'copy', 'excel', 'pdf' ]
    });
    // this.tableWidget.buttons().containers().appendTo($('div.eight.column:eq(0)', this.tableWidget.table().container()));
    this.tableWidget.buttons().containers('#button-export-dtt');
    console.log(this.tableWidget.buttons().containers());
  }

Thanks,
Best Regards,
FR

allan

I don't see the colvis button being included there, but it is in your scripts array above. I'm not sure if your build environment will result in it being included or not?

What to do, is in your browser's console type:

$.fn.dataTable.ext.buttons

And that will show what button types are available. For example, on this page Chrome shows me:

Allan

pekokFC

Hi alan,
here are my console output :

and this is when i add colvis in my buttons array :

Hope to hear from you soon,
Thanks ~

allan

Can you run that line of code immediately after the error has occurred please? I'm wondering if DataTables might be getting loaded twice.

If you can publish it to a site, that would be really useful as its very hard to debug it without being able to interact with it.

Allan

pekokFC

test

pekokFC

Sure, dude
here it is : https://goo.gl/kiKj6Z

Thanks,

pekokFC

Hei guys, have you got my reply yesterday ?
i attached my link, but it said the post was pending due need for approval.

allan

Hi - sorry, it got flagged as spam for whatever reason. I've approved it now and its above.

Thanks for the link - it takes me to a dashboard page which doesn't appear to have a DataTable on it. If I try the URL in your screenshot (/report/pekok) in, I get a 404 from the server, and I don't see anything in the links that would be the page in question. Can you tell me where I can see the page with the issue please?

Thanks,
Allan

pekokFC

Thanks Alan, sorry for late response.
Open the url without any route. It will render all the component first, then you can go to Basic Report -> take the first on the list or any. They all use datatables.

Best Regards,

allan

This is what I get if I load one of the Basic Reports:

I don't actually see any buttons or any errors.

Thanks,
Allan

pekokFC

Yeah , that's the thing mate...
i already include the init button script as in the documentation.

Best Regards,

allan

Oh I see - the issue is that the buttons aren't showing up there?

You have this line of code:

 this.tableWidget.buttons().containers('#button-export-dtt');

which gets the Buttons container, but it doesn't do anything with it. So the buttons are never added to the document - hence why they can't be seen.

You need to use appendTo or similar to add them into the document where you want them.

Allan

pekokFC

I changed it to following code :

private initDatatable(): void {
    const tableId: any = $('#' + this.id);
    this.tableWidget = tableId.DataTable({
      // lengthChange: false,
      buttons: [ 'copy', 'excel', 'pdf' ],
      scrollX: true
    });
    // this.tableWidget.buttons().containers().appendTo($('div.eight.column:eq(0)', this.tableWidget.table().container()));
    this.tableWidget.buttons().containers().appendTo($('div.eight.column:eq(0)', this.tableWidget.table().container()));
    // this.tableWidget.buttons().containers('#button-export-dtt');
    console.log(this.tableWidget.buttons().containers());
  }

as in the docs https://datatables.net/extensions/buttons/examples/styling/semanticui.html
But still nothing changed.

allan

Could you update your deployed application with that code please? That looks like it should work as far as I can see.

Allan

pekokFC

Hi Allan,
i just deployed my app to the staging environment. You can check it again if you want. But still, the buttons doesn't show.

allan

That sort of helped in that the buttons container is now being put into the page, but there is no buttons inside it.

This screenshot shows what is now the issue:

Basically, although the buttons are available on the global $ they aren't in the _dtButtons variable. That's weird as var _dtButtons = DataTable.ext.buttons;.

That suggests that perhaps DataTables is being loaded twice, or perhaps into different contexts. There is certainly some kind of scoping issue happening there.

I don't have enough knowledge of your system and build configuration to be able to say much more than that though.

Allan