Export buttons won't show

ghi_ri

Hello,

I am using DataTables for a scholl project. I can show my data and sort it with no problem but I also want to display export buttons (excel and pdf) but they won't show. Can someone help me please ? I searched in the forum and found questions like mine and tried everything that was suggested but still nothing ...

I added this is my .js file :
$('#mytable').dataTable( { dom : 'B', buttons: [ 'excel' ] } );

I used the debuger and as you can see here, there is no problem:

PS: In the download I chose first Bootsrap 5 and the DataTables with the buttons and Search. These are the imports on my HTML file:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.11.5/b-2.2.2/b-html5-2.2.2/b-print-2.2.2/sp-2.0.0/datatables.min.js"></script>

PSS: I also tried to upload the page but there is an error...

kthorngren

Open the link to the CDN:

https://cdn.datatables.net/v/bs5/dt-1.11.5/b-2.2.2/b-html5-2.2.2/b-print-2.2.2/sp-2.0.0/datatables.min.js

You will see the install libraries. Looks like jszip.js is missing. This is needed for excel. Go to the update link provided in the file and add jszip.js.

Kevin

ghi_ri

Thank you @kthorngren for your answer but I still can't see the button. I am working on WAMP do you think it's a problem ? Because when I run my code on Code Pen or Stackblitz the button appears (along with the individual column search inputs that I implemented in the footer). These are all my imports in the html footer, do you think the order is causing an issue here ?

``` <!-- Appel JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
referrerpolicy="no-referrer"></script>

        <!-- Appel Bootstrap -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 
        crossorigin="anonymous"></script>


        <!-- Appel dataTables --> 
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script> 
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script> 

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.11.5/b-2.2.2/b-html5-2.2.2/b-print-2.2.2/sp-2.0.0/datatables.min.js"></script>

        <!-- Appel SweetAlert2 -->
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>```

kthorngren

Sorry, I don't know what WAMP is.

However it still looks like you have a problem with the include files. Lines 8-10 you are loading buttons and jszip. Then in line `14 you are loading buttons via the combined file. Open the file you will see this:

* Included libraries:
 *  DataTables 1.11.5, Buttons 2.2.2, HTML5 export 2.2.2, Print view 2.2.2, SearchPanes 2.0.0

Loading buttons.js twice (or most js files) likely will cause problems. Remove line 8-9 and go to the update link in the file:

https://datatables.net/download/#bs5/dt-1.11.5/b-2.2.2/b-html5-2.2.2/b-print-2.2.2/sp-2.0.0

Select jszip to add to the combined CDN. Use the new CDN link generated.

Kevin

ghi_ri

Thank you @kthorngren for your time !! The thing is I don't know why when I use my code on CodePen for example, my csv button (I gave up on Excel) and the select inputs (https://datatables.net/examples/api/multi_filter.html) shows up but when I use a local server like (WAMP or XAMP) they disappear. I don't have a single error too so I don't know where this is coming from ??

I updated the download link on my html file and still nothing...

colin

We'll really need to see this to be able to progress it. Could you link to your page, please, so we can take a look,
Colin

ghi_ri

Hello @colin ,

Thank you very much for your time : https://github.com/kingRita/Escapia/blob/main/recherches/Client/recherche_client.php

I couldn't directly upload my code via the datatables tool but here is the github page where I push my project

colin

If you could link to a page, that would be more helpful - we need to see it running,

Colin

ghi_ri

Hello @colin ,
I tried to upload the code via datatable debug but I have this error message again and again.

Is it because I have a server side in php/phpmyadmin ?

I am really lost in how I can fix this issue because the buttons/search pannels are showing up in Stackblitz but not on my page when I am working with WAMP/XAMP

tangerine

You have not followed @kthorngren's advice. You are still loading buttons twice.

ghi_ri

Hi @tangerine I forgot to update the file but I changed the uploads. The thing is I don't know why the csv button is not showing.

I am using this :
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/cr-1.5.5/date-1.1.2/r-2.2.9/sl-1.3.4/datatables.js"></script>

And the .js function is :

kthorngren

I copied the CDN you linked to plus your Datatables config here:
http://live.datatables.net/gurijayo/1/edit

The CSV button works. In order to help we will need to see the problem. Please post a link to your page or create a test case that show the issue. Update the test case I provided if you want.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ghi_ri

Hello @kthorngren ,

I think that I didn't explain myself very well. I am building an application linked to a MySQL server with PHP. My datatable is responsive, dynamic (the php fetches the data from the dataserver and display it ) and working very well when I run it with Wampserver (a solution stack for the Microsoft Windows operating system consisting of the Apache web server, MySQL database and PHP programming language).

THE problem I have is that when I use any tool to provide a test case the csv button appears but without the data in the tables (which is normal because it is not linked to my dataserver) when I run it.

http://live.datatables.net/gurijayo/3/

How can I make the csv button appear when using something like WAMP/LAMP/XAMP... ?

kthorngren

Looking at your first screenshot I see the page length drop down. You code snippets and last test case have dom: "Bfrtip" to display the buttons but not display the page length element, ie, there is not l in your dom option. That suggests the first screenshot is using a different Datatables initialization code. Maybe you need to clear the browser's cache. Or you will need to debug the code for the first screenshot to see what is happening.

Kevin

ghi_ri

@kthorngren

This is the bottom of the table from the previous screenshot. (It is a very large table) As you can see even the search pannels on the footer are not showing. I really don't understand why.

It is the exact same code (the first screenshot is just cropped because it contains real data that belongs to clients) and THIS is my issue : Why does it appear on CodePen/Stackblitz etc... but not when I am using WAMP ? I added l in the dom and cleared my cache but it did not change a thing.

This is the debug :

kthorngren

Why does it appear on CodePen/Stackblitz etc... but not when I am using WAMP ?

Did you try clearing your browser's cache?

As you can see even the search pannels on the footer are not showing.

This and the length change element indicate that the Datatbles code you are using with WAMP is not the same as the code you posted. Or you could be initializing Datatables in a different place in your code and not know it. Look for. any place that uses DataTable() or dataTable(). If any of thse execute before your code with the buttons then that will be the initialization code. Again without being able to see the problem we won't be able to offer suggestions.

Use the browser's debugger to step through your Javascript to see what code is executed when the web page shows the initialized Datatable.

Kevin