Export buttons won't show

Export buttons won't show

ghi_righi_ri Posts: 8Questions: 1Answers: 0

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...

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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_righi_ri Posts: 8Questions: 1Answers: 0

    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>```
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited March 2022

    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_righi_ri Posts: 8Questions: 1Answers: 0

    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...

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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_righi_ri Posts: 8Questions: 1Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • ghi_righi_ri Posts: 8Questions: 1Answers: 0

    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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

  • ghi_righi_ri Posts: 8Questions: 1Answers: 0

    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 :

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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_righi_ri Posts: 8Questions: 1Answers: 0

    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... ?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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_righi_ri Posts: 8Questions: 1Answers: 0
    edited March 2022

    @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 :

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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

Sign In or Register to comment.