DataTables export buttons

sxperiaz777

Hi guys!

I'm new using DataTables and would like to learn how it's being implemented.

I have a view page (please see attached fle - Details.png) and initially loaded with data. Toggling the dropdown list will reload the page with the corresponding data.

I included the export buttons for me to able to export the data using the available file formats. My issue is that whenever I clicked on the button/s, nothing happens. All the required js/css files were included in my bundle config.

Below is my javascript code.

$(document).ready(function () {
    var table = $("#MyDataTable").dataTable({
        'bSort': false,
        'bAutoWidth': false,
        'aoColumns': [
              { sWidth: "5%", bSearchable: false, bSortable: false },
              { sWidth: "35%", bSearchable: false, bSortable: false },
              { sWidth: "30%", bSearchable: false, bSortable: false },
              { sWidth: "30%", bSearchable: false, bSortable: false }
        ],
        'bInfo': null,
        'paging': false,
        'bFilter': false,
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: ':contains("Office")'
                }
            },
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    });
});

Thanks in advance for all your help!

tangerine

...nothing happens.

Are you sure? Have you checked your browser console for errors?

All the required js/css files were included in my bundle config.

Are you sure? Can you show us your HTML head section?

sxperiaz777

Hi Tangerine,

Yeah, I forgot to check (sorry about that). Got this error from chrome's dev tools:

Uncaught TypeError: this.processing is not a function
at r.action (buttons.html5.min.js:54)
at r (dataTables.buttons.min.js:38)
at HTMLAnchorElement.<anonymous> (dataTables.buttons.min.js:38)
at HTMLAnchorElement.dispatch (jquery-1.12.4.js:5226)
at HTMLAnchorElement.elemData.handle (jquery-1.12.4.js:4878)

Any idea why I'm getting these? Thanks!

kthorngren

What version of Datatables and Buttons are you using?

I suspect you have mismatched versions. Maybe upgrade the Buttons to the latest (1.3.1 think).

Also you are using the old form of the Datatables initialization. If you are just starting then you will want to use the current format, like var table = $("#MyDataTable").dataTable({ should be var table = $("#MyDataTable").DataTable({. Notice the upper case D in the word DataTable.
https://datatables.net/manual/installation#Initialising-DataTables

Also some of the init options you are suing are the old form. They work but its probably best practice to use the new form. There is Datatables documentation that maps the old to the new commands but I can't fine it. An example is bAutoWidth the old from and the new is autoWidth. Also, unless you know what its doing you probably want to remove 'bAutoWidth': false, from the config as it can mess with the column widths.

Kevin

sxperiaz777

Thank you @kthorngren for the help! You're right, the js/css file versions are not matched. I reloaded all the needed js/css and it;s now working!

Got another issue though. If you can see/open the attached file, there's this dropdown on my page where if toggled, it will update/reload the data in the datatables list. My issue now is, regardless how many times I toggle the dropdown field and do export, the file will always contain the data data I got the first time the page is loaded.

Any idea what's to be done for it to work?

Thanks in advance!

hnhegde

Hello,
I am getting the same error:

buttons.html5.min.js:23 Uncaught TypeError: this.processing is not a function
    at r.action (buttons.html5.min.js:23)
    at q (dataTables.buttons.min.js:13)
    at HTMLAnchorElement.<anonymous> (dataTables.buttons.min.js:13)
    at HTMLAnchorElement.dispatch (jquery-1.12.4.js:5226)
    at HTMLAnchorElement.elemData.handle (jquery-1.12.4.js:4878)

I confirmed the versions match with what is on the example: https://datatables.net/extensions/buttons/examples/initialisation/export.html .

Appreciate inputs on what else may be missing,

regards,
harsha

allan

Happy to take a look into it if you provide a link showing the issue.

Allan

hnhegde

Hello Allan,
Sorry for the late response. Issue is resolved though. Funny enough, it was Chrome browser that was caching the error message. Incognito mode helped discover the issue was fixed, once compatible versions of js libs were added.

Regards,
Harsha