'why is my datatable not showing data in page?

i am using datatable in adminLTE laravel8 and the table is not showing on the page

here my js script

@push('js')
    
<script src="asset/plugins/datatables/jquery.dataTables.js"></script>
<script>
    $(document).ready(function() {
        loaddata()
    })

    function loaddata() {
        $('#table').DataTable({
            serverside: true,
            processing: true,
            ajax: {
                url: "{{route('supplier.index')}}",
            },
            columns: [{
                    data: 'nama',
                    name: 'nama'
                },
                {
                    data: 'telp',
                    name: 'telp'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'account',
                    name: 'account'
                },
                {
                    data: 'address',
                    name: 'address'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                },
            ]
        })
    }
</script>
@endpush('js')

data shows when I return json, but when I render in view it doesn't show, the page is blank

please help me..



Solution 1:[1]

Add the following lines

Inside Head

<link rel="stylesheet" href="asset/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="asset/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="asset/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">

In footer section

<script src="asset/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="asset/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="asset/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="asset/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="asset/plugins/datatables-buttons/js/buttons.html5.min.js"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abinash Bhatta