How to fix Buttons not showing with jQuery datatable bootstrap
By FoxLearn 2/16/2024 9:07:54 AM 597
This post shows you how to fix datatable.net buttons not showing bootstrap and ajax loaded data
datatables buttons example
To fix the problem you should add initComplete
initComplete: function (settings, json) { dataTable.buttons().container().appendTo($('.table-tools-col:eq(0)', dataTable.table().container())); }
Adding css
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css">
Adding script
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script> <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script> <script src="https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>
You can also add more
<script src="~/lib/datatables.net-bs4/js/dataTables.bootstrap4.js"></script> <script src="~/lib/datatables.net-colreorder/js/dataTables.colReorder.js"></script> <script src="~/lib/datatables.net-select/js/dataTables.select.js"></script> <script src="~/lib/datatables.net-buttons/js/dataTables.buttons.js"></script> <script src="~/lib/datatables.net-buttons-bs4/js/buttons.bootstrap4.js"></script> <script src="~/lib/datatables.net-buttons/js/buttons.html5.js"></script> <script src="~/lib/datatables.net-buttons/js/buttons.print.js"></script> <script src="~/lib/datatables.net-buttons/js/buttons.colVis.js"></script>
and css
<link rel="stylesheet" type="text/css" href="~/lib/datatables.net-bs4/css/dataTables.bootstrap4.css"> <link rel="stylesheet" type="text/css" href="~/lib/datatables.net-buttons-bs4/css/buttons.bootstrap4.css">
Adding javascript to your html
$(document).ready( function () { var table = $('#table').DataTable({ "ajax": { url: "..json", dataSrc: '' }, buttons: [ { "extend": "colvis", "text": "<i class='far fa-eye text-125 text-dark-m2'></i> <span class='d-none'>Show/hide columns</span>", "className": "btn-sm btn-outline-info btn-h-outline-primary btn-a-outline-primary", columns: ':not(:first)' }, { "extend": "copy", "text": "<i class='far fa-copy text-125 text-purple'></i> <span class='d-none'>Copy to clipboard</span>", "className": "btn-sm btn-outline-info btn-h-outline-primary btn-a-outline-primary" }, { "extend": "csv", "text": "<i class='fa fa-database text-125 text-success-m2'></i> <span class='d-none'>Export to CSV</span>", "className": "btn-sm btn-outline-info btn-h-outline-primary btn-a-outline-primary" }, { "extend": "print", "text": "<i class='fa fa-print text-125 text-orange-d1'></i> <span class='d-none'>Print</span>", "className": "btn-sm btn-outline-info btn-h-outline-primary", autoPrint: false, message: 'This print was produced using the Print button for DataTables' } ] }, "columns": [ { sortable: false, "render": function(data, type, row, meta) { return '<button type="button" class="btn btn-xs btn-success" onclick="confirmDelete(this)" id="'+ row.id +'">Delete</button>'; } }, { "data": "id" }, { "data": "name" } ], "deferRender": true, "order": [[1, 'asc']] }); table.buttons().container() .appendTo( $('.table-tools-col:eq(0)', table.table().container() ) ); } );
- How to hide “Showing 1 of N Entries” with jQuery datatables
- How to Change parameter used in datatables ajax url.Action on Ajax.reload
- How to add class to tr using jQuery datatable
- How to fix 'Requested unknown parameter '6' for row 0, column 6'
- How to Add new row to datatable using jquery datatable
- Ho to add class to column dynamically using jQuery datatable
- How to remove no data available in table from datatable in jQuery
- How to Rename “show XX entries” dropdown in DataTables
Categories
Popular Posts
11 Things You Didn't Know About Cloudflare
12/19/2024