Buttons Not Showing.

jricklefs

I'm using Ajax and I'm attempting to add the buttons during the InitComplete.
Like below. However then show up in IE but not chrome? Any help thanks

 $(function () {
       var table = $('#ListTable').DataTable({
           dom: 'B',
           initComplete: function (settings, json) {
               
               new $.fn.dataTable.Buttons( table, {
                   buttons: [
                       'copy', 'excel', 'pdf'
                   ]
               });
           },
            ajax: '/Home/GetStuff',
            dataSrc: 'data',
            columns: [
                { data: 'Center' },
                { data: 'Account' },
                { data: 'Ledger' }
            ]
        });
    });

colin

Hi @jricklefs ,

We're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

jricklefs

Heres a JS link .
http://live.datatables.net/caxaliho/1/edit

I wasn't able to Link to my actual project so I faked it best I could

kthorngren

You have a couple issues. First you are loading too many CSS and JS files. For example you are loading the Datatables Bootstrap, Bootstrap4 and foundation integration files. I cloned your example to this page and used the CSS and JS CDN generated using the Download Builder.

The second is if you want to use the new constructor then you need to indicate where to place the buttons, like this example:
https://datatables.net/extensions/buttons/examples/initialisation/new.html

And you don't want to use the B in the dom option.

This is your returned data:

{
  "userId": 1,
  "id": 10,
  "title": "illo est ratione doloremque quia maiores aut",
  "completed": true
}

The data needs to be encapsulated in an array, like this:

[
  {
    "userId": 1,
    "id": 10,
    "title": "illo est ratione doloremque quia maiores aut",
    "completed": true
  }
]

Datatables expects an array of objects whether there is one or multiple. Take a look at the ajax tab of this example:
https://datatables.net/examples/ajax/objects.html

The ajax.dataSrc needs to be within the ajax option. In your case it doesn't look like you are returning the data in a data or other object so your dataSrc would be blank. The data isn't loading in the updated example because its not in an array.

Kevin

jricklefs

kthorngren , Made some adjustments, I understand the Data needs to be in an array,
but because of business rules I can't use the CDN, and when I download the files from the DownLoad Builder they are different than the ones you showed.
live.datatables.net/corilako/1/edit

maybe I have the wrong files.... but I don't understand which ones to use.

kthorngren

If you look at the browser's console you will see the CSS and JS files are not found. You probably don't want to use the "nightly" files either. When using the download builder you can select "Concatenated" files which will put all the files in one file. This is what I did for the CDN. You can click on the Download tab and download the files.

The files to use are dependent on the options you want. You will likely want HTML5 export instead of flash export for the buttons. You will want JSZip for Excel and pdfmake for PDF files.

HTH,
Kevin

jricklefs

I noticed that the files were throwing 404 after posting. I managed to get the Print to show but I have to have the dom: 'B' enabled.

http://live.datatables.net/tuhofuvu/1/edit
Still working on the the others.
I thought flash export was a fall back for html 5 but I will keep tweeking.
thankskagain.

kthorngren

The dom: 'B' is different than then new constructor you are trying use. If you want to use the dom option for the buttons then move the buttons config inside the Datatables init and remove the new constructor. Something like this:

       var table = $('#ListTable').DataTable({
           dom: 'B',
         ajax: {
               url: 'https://jsonplaceholder.typicode.com/todos/10',
               dataSrc: ''
           },
            buttons: [
                'copy', 'excel', 'pdf'
            ],
          
            columns: [
                { data: 'userId' },
                { data: 'id' },
                { data: 'title' },
               { data: 'completed' }
            ]
        });

My suggestion would be to use the Download Builder to generate the files. Copy the CDN version into your test case and get that working. Once you have the correct CDN version go to the Download tab of the builder and download your files to use locally. Don't use the "Add Library" option provided in the test case.

Kevin

jricklefs

So after going back and forth trying to understand what was going on it makes sense the DL was giving me the Combined files and also the Seperate file. Tweeked the Js as you suggested and got all the proper references and its working now. Thanks again.