The Export buttons not showing

Rashid U

Hi all,
The PHP/Laravel framework is used in my web application. The DataTable information is shared from the controller into the blade(frontend file) as JSON response. the table is working perfectly. but the buttons are not showing. I cross-checked that all required files were added.

At the front end / AJAX response, the code looks like as follows ------
var tableHeaders='';

                $.each(response.columns, function(i, val){
                        tableHeaders += "<th>" + val + "</th>";
                    });

                    $("#table-div").empty();
                    $("#table-div").append('<table id="displayTable" class="table table-striped table-hover table-bordered data-table" cellspacing="0" width="100%"><thead class="table-dark"><tr>' + tableHeaders + '</tr></thead><tbody></tbody></table>');
                    $('#displayTable').dataTable(response,{

                    });

-------------- END --------------
I tried to call the button using dom, but no luck. could you please help me anyone with this? I will share more info if required.

kthorngren

Looks like the response contains the Datatables config. Can you post the contents so we can see how you are defining the buttons?

I cross-checked that all required files were added.

Please post the files you are including. Also make sure there aren't any errors loading the files when the page is loaded.

Kevin

Rashid U

The JSON Response as follows,

{"activity_name":"APF- Seed treatment support to Women farmers",

"data":[
[1,"Dhanpur","Bhorva","Babudiben,ramsingbhi","Bhabhorramsingbhi","NA","Rabi","Description","2022-12-21"],
[2,"Dhanpur","Bhorva","Baria liltaben,rangitbha","Rangitbhai","NA","Rabi","Description","2022-12-21"],[3,"Kadana","Aatalwada","Amdaben","Mangal Bhai","Budget","Zaid","Yes","2023-01-05"]],
"columns":[["#"],["Block"],["Village"],["Individual"],["Family"],["Budget line item (if Non - Budgeted please write NA)"],["Season"],["Activity Description"],["Date"]]}

The table loads perfectly with the data & column head as shown above

The buttons configuration as follows,

$("#table-div").append('<table id="displayTable" class="table table-striped table-hover table-bordered data-table" cellspacing="0" width="100%"><thead class="table-dark"><tr>' + tableHeaders + '</tr></thead><tbody></tbody></table>');
                        $('#displayTable').dataTable(response,{
                            dom:Bfrtip,
                            buttons: [
                                'copy', 'excel', 'pdf'
                            ]
                        });

I have added the all required files. because the button shows when the table initialise normal way (means without appending through AJAX response). Still confused?. I am glad to share more details. any help will really appreciated.

colin

The dom is a string, so "Bfrtip" needs to be quoted, something like:

   dom: 'Bfrtip',

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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

Rashid U

Hi Colin, Thanks for your reply. Still, I have some difficulties to share the URL, because it is live and now I am working on my local host which can't access it remotely. so please do one thing. I will share the JSON response format and please tell me how can I configure the button while appending this response.

"data":[[1,"A","B","C"],[2,"D","E","F"],[3,"G","H","I"]] and "column": [["ID"],["coloumn1"],["coloumn2"],["coloumn3"]]

Because the column title is dynamic and can't be predefined. so both column titles and each row display perfectly. when trying to put the export button, nothing will display there. the AJAX success response is shown below

                        var tableHeaders='';
                    
                        $.each(response.columns, function(i, val){
                            tableHeaders += "<th>" + val + "</th>";
                        });
                    
                        $("#table-div").empty();
                        $("#table-div").append('<table id="displayTable" class="table table-striped table-hover table-bordered data- 
                       table" cellspacing="0" width="100%"><thead class="table-dark"><tr>' + tableHeaders + '</tr></thead> 
                        <tbody></tbody></table>');

                        $('#displayTable').dataTable(response,{
                            dom:'Bfrtip',
                            buttons: [
                                'copy', 'excel', 'pdf'
                            ]
                        });

If possible please give me a solution, or I will share the live URL.

allan

It seems to work just fine for me: http://live.datatables.net/tewujaru/1/edit .

Allan

Rashid U

Hello @allan

I don't know how to say thank you. this is the first time I am asking for help from such a big forum and got a response within a couple of hours. this is amazing.

Again thank you so much @allan @colin and @kthorngren .

allan

The file still has the UTF-8 BOM. At least in the link you gave above.

Allan

Rashid U

Sorry, I didn't get you.

allan

As in I downloaded the file from your site again and it still has the UTF-8 BOM, which is why it is still giving an error.

Allan

Rashid U

@allan
The problem is solved. and I don't know which file/link you are referring to. sorry.!

allan

Nevermind - good to hear you've got it working.

Allan

Rashid U

The solution you mentioned here: [link](http://live.datatables.net/tewujaru/1/edit . "link") worked for me. thank you @allan