bootstrap 4 - Datatable export buttons are not showing

Question

and code if datatabble jquery is as:

<script src="~/Scripts/jquery-3.5.1.min.js"></script>
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

    <!-- buttons -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">


    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.11/sorting/datetime-moment.js"></script>
    <script src="~/Scripts/DataTables/dataTables.buttons.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" defer></script>

and jquery datatable code is as:

$('#dataTableInward').DataTable({
                "lengthMenu": [[50, 100, 150, -1], [50, 100, 150, 200, 300, 500, 1000]],
                dom: 'Blfrtip',
                "buttons": [
                    'excel', 'csv', 'print', 'copy'
                ],
                "ajax": {
                    "url": "/Home/getDbData",
                    "type": "GET",
                    "dataType": "json"
                },
                "columns": [
                    { "data": "Id" },
                    { "data": "Inward_No" },
                    { "data": "Inward_Date" },
                    { "data": "Claim_Type" },
                    { "data": "Expense_Type" },
                    { "data": "Inwarded_By" },
            ....

Please help me in this... everything is working perfect just export buttons are not visible

Answer 1

You have a mixture of different scripts in your header, which need to be cleaned up.

For example, you have:

https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js (deferred)

But you also have:

https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js

Also, when I run your code and open my browser's console (e.g. via F11), I can see the following error:

Uncaught TypeError: i.Buttons is undefined

Does the following script exist? And is it in the right location to be accessed by your page?

~/Scripts/DataTables/dataTables.buttons.js

You also tagged your question as a bootstrap-4 question - but I do not see any Bootstrap-related libraries on your page.

Suggestion:

Your DataTables code looks OK. But I would remove all those JS and CSS imports and start again.

Go to the DataTables download builder page and select the libraries you want.

For example if I ignore Bootstrap (just for this demo), and if I choose plain DataTables with jQuery and buttons, I get the following:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css"/>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.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/1.10.23/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>

Using these with your code allows your buttons to be displayed.

You can add back in the extra libraries you also want - for exaple, for moment.js. You can adjust for Bootstrap, also, as needed.