How to fix Buttons not showing with jQuery datatable bootstrap

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() ) );
} );