Required links for export to excel button in datatable

Learn2excel

Hi All,

Can you let me know what are required links to be referenced if we need to have the export to excel button above the datatable.

I have the below in my Sitemaster file.

<link href="bootstrap-5.0.2-dist/css/bootstrap.min.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">

<link href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css" rel="stylesheet"/>
<link href ="https://cdn.datatables.net/buttons/3.0.1/css/buttons.dataTables.css" rel="stylesheet"/>

and at the bottom

"https://cdn.datatables.net/2.0.3/js/dataTables.js"
"https://cdn.datatables.net/buttons/3.0.1/js/dataTables.buttons.js"
"https://cdn.datatables.net/buttons/3.0.1/js/buttons.dataTables.js"
"https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"
"https://cdn.datatables.net/buttons/3.0.1/js/buttons.html5.min.js"

I am getting confused, so could not understand what is and what is not required, Kindly help.

Thanks & Regards

Learn2excel

forgot to add below is the first line in the bottom for

<

script>

Learn2excel

Sorry, ignore this question. It was a syntactical error on my part that was causing the problem.

allan

No worries. Thanks for the update.

Allan

Learn2excel

Sorry my apologies. I would like to still know the sequence to be followed for the below links and also if all of them are required or if some links can be removed so that I can ensure that the required links are there for my datatables to work correctly.

<link href="bootstrap-5.0.2-dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
<link href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css" rel="stylesheet"/>
<link href ="https://cdn.datatables.net/buttons/3.0.1/css/buttons.dataTables.css" rel="stylesheet"/>

at the bottom of the site master page i have the below links: I have purposefully removed the starting and closing brackets on the script tag as I was unable to post it in comment with them included.

script src="Scripts/jquery-3.4.1.min.js"></script
script src="bootstrap-5.0.2-dist/js/bootstrap.min.js"></script
script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script
//<script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script
//<script src="https://cdn.datatables.net/buttons/3.0.1/js/dataTables.buttons.js"></script
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.dataTables.js"></script
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.html5.min.js"></script

Thanks & Regards

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

I have purposefully removed the starting and closing brackets on the script tag as I was unable to post it in comment with them included.

Use Markdown code formatting to highlight the code. The instructions are under the Post Comment button when you are leaving a commnet:

Posts are formatted using Markdown. To highlight code, please use triple back ticks (```) on new lines before and after the code block.

The easiest way to get the proper libraries to include is to use the Download Builder, the Download button on the left of the page.

You will want to get the appropriate Datatables style integration files for Bootstrap 5. See the Styling docs for details. Select Bootstrap 5 in the first section.

You are loading datatables.js twice; once in line 3 and again in line 4. This can cause problems. Also you are loading two different versions. In general you don't want to duplicate loading .css or .js files.

I used the download builder to generate the files needed for Datatables and Excel export using Bootstrap 5. The list doesn't include jQuery nor Bootstrap 5.

<link href="https://cdn.datatables.net/2.0.3/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/3.0.1/css/buttons.bootstrap5.min.css" rel="stylesheet">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.html5.min.js"></script>

Kevin