Datatable export to csv,excel in mvc core

Question

I have following code to export datatable in distinct format but on my index button are not showing

$(document).ready(function () {
$('#example1').DataTable({
dom: "Bfrtip",
buttons: [
"excel",
"pdf",
{ extent: "print", text: "<span class='glyphicon glyphicon-print'></span> Print" },
{ extent: "excelHtml5", text: "<span class='glyphicon glyphicon-th-list'></span> Excel HTML5 Export" },
{ extent: "pdfHtml5", text: "<span class='glyphicon glyphicon-save'></span> PDF HTML5 Export", title: "Filename" }
]
});
});

Answer 1

Hi @anil kumar ,

Try to use F12 developer tools to check if there has any error and whether the relate JS and CSS reference load success?

According to the JQuery DataTables official sample and your code, I create a sample with the following code, everything works well on my side:

< link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" />  
< link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css" />  
@*Since we have already added the JQuery reference in the Layout page, there is no need to add it again.   
If you doesn't add the jquery reference before, remember to add it.*@  
@*<script src="https://code.jquery.com/jquery-3.5.1.js"></script>*@  
< script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>  
< script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.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/2.0.1/js/buttons.html5.min.js"></script>  
< script type="text/javascript">  
    $(function () {  
        $('#example').DataTable({  
            dom: 'Bfrtip',  
            buttons: [  
                "excel",  
                "pdf",  
                { extent: "print", text: "<span class='glyphicon glyphicon-print'></span> Print" },  
                { extent: "excelHtml5", text: "<span class='glyphicon glyphicon-th-list'></span> Excel HTML5 Export" },  
                { extent: "pdfHtml5", text: "<span class='glyphicon glyphicon-save'></span> PDF HTML5 Export", title: "Filename" }  
            ]  
        });  
    });  
</script>  

[Note] In the above code, between the '<' and 'script', there have a space, please remember to remove it.

The result as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion