buttons not showing when create datatable inside the bootstrap modal

drhardian

Hi All,

I have create a datatable on bootstrap popup modal and working properly, but I can't add buttons like Excel button, here is my code,

var tblToptenPersons = {
            dom: 'Bf',
            processing: true,
            serverSide: true,
            retrieve: true,
            scrollCollapse: true,
            scrollY: "450px",
            scrollX: true,
            buttons: [
                'excel',
            ],
            lengthMenu: [
                [25, 50, 100, -1],
                [25, 50, 100, "All"]
            ],
            ajax: {
                url: url,
                data: function(d) {
                    d.finding = $('.toptenperson-finding').text();
                    d.id = $('#mcuactivity').val();
                    d.filterByVendorId= $('#filter_vendor_value').val();
                    d.filterByPackage= $('#filter_package_value').val();
                }
            },
            order: [],
            columns: [
                {
                    data: 'medicalrecord', name: 'medicalrecord',
                    searchable: true, orderable: true
                },
                {
                    data: 'name', name: 'name',
                    searchable: true, orderable: true
                },
                {
                    data: 'gender', name: 'gender',
                    searchable: true, orderable: true
                },
                {
                    data: 'bod', name: 'bod',
                    searchable: true, orderable: true
                },
                {
                    data: 'location', name: 'location',
                    searchable: true, orderable: true
                },
                {
                    data: 'packagemcu', name: 'packagemcu',
                    searchable: true, orderable: true
                },
            ]
        }; 

function openToptenPersons(finding) {
       $('.toptenperson-finding').text(finding);
       $('#topTenPersonModal').modal('toggle');
       $('#tblToptenPersons').DataTable().destroy();
       $('#tblToptenPersons').DataTable(tblToptenPersons);
}

allan

dom: 'Bf',

You must have t in the DOM somewhere as well - that is the table element.

However, I'm not sure that is the issue. Can you link to the page showing the issue so I can debug it please?

Allan

drhardian

Hi Allan,

Actually I'm running it on my local environment so I can't share the link, but finally I download the package including the buttons extension and it's working now, here is my complete setup before,

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet">
    <link href="{{ asset('theme/assets/node_modules/datatables/media/css/dataTables.bootstrap4.css') }}" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css" rel="stylesheet">

<script src="{{ asset('theme/assets/node_modules/datatables/datatables.min.js') }}"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js" type="text/javascript"></script>

<script>
var tblToptenPersons = {
            dom: 'Bflrtip',
            processing: true,
            serverSide: true,
            retrieve: true,
            scrollCollapse: true,
            scrollY: "450px",
            scrollX: true,
            buttons: [
                'excel',
            ],
            lengthMenu: [
                [25, 50, 100, -1],
                [25, 50, 100, "All"]
            ],
            ajax: {
                url: "{{ route('showtoptenperson') }}",
                data: function(d) {
                    d.finding = $('.toptenperson-finding').text();
                    d.id = $('#mcuactivity').val();
                    d.filterByVendorId= $('#filter_vendor_value').val();
                    d.filterByPackage= $('#filter_package_value').val();
                }
            },
            order: [],
            columns: [
                {
                    data: 'medicalrecord', name: 'medicalrecord',
                    searchable: true, orderable: true
                },
                {
                    data: 'name', name: 'name',
                    searchable: true, orderable: true
                },
                {
                    data: 'gender', name: 'gender',
                    searchable: true, orderable: true
                },
                {
                    data: 'bod', name: 'bod',
                    searchable: true, orderable: true
                },
                {
                    data: 'location', name: 'location',
                    searchable: true, orderable: true
                },
                {
                    data: 'packagemcu', name: 'packagemcu',
                    searchable: true, orderable: true
                },
            ]
        };

function openToptenPersons(finding) {
            $('.toptenperson-finding').text(finding);
            $('#topTenPersonModal').modal('toggle');
            $('#tblToptenPersons').DataTable().destroy();
            $('#tblToptenPersons').DataTable(tblToptenPersons);
        }

I still did not know which part that I've missed, because when I'm running it without modal, it's working well, but when inside a modal it doesn't display the button even though on inspect window the div button is appear but doesn't have any text

drhardian

Hi Allan,

Here is my update code,

<link href="https://cdn.datatables.net/v/bs4/jszip-3.10.1/dt-1.13.7/b-2.4.2/b-html5-2.4.2/fh-3.4.0/r-2.5.0/sl-1.7.0/datatables.min.css" rel="stylesheet">

<script src="https://cdn.datatables.net/v/bs4/jszip-3.10.1/dt-1.13.7/b-2.4.2/b-html5-2.4.2/fh-3.4.0/r-2.5.0/sl-1.7.0/datatables.min.js"></script>

<script>
var tblToptenPersons = {
            dom: '<"mr-1 btn btn-sm" B>lfrtip',
            processing: true,
            serverSide: true,
            retrieve: true,
            scrollCollapse: true,
            scrollY: "450px",
            scrollX: true,
            buttons: [
                'excel',
            ],
            lengthMenu: [
                [25, 50, 100, -1],
                [25, 50, 100, "All"]
            ],
            ajax: {
                url: "{{ route('showtoptenperson') }}",
                data: function(d) {
                    d.finding = $('.toptenperson-finding').text();
                    d.id = $('#mcuactivity').val();
                    d.filterByVendorId= $('#filter_vendor_value').val();
                    d.filterByPackage= $('#filter_package_value').val();
                }
            },
            order: [],
            columns: [
                {
                    data: 'medicalrecord', name: 'medicalrecord',
                    searchable: true, orderable: true
                },
                {
                    data: 'name', name: 'name',
                    searchable: true, orderable: true
                },
                {
                    data: 'gender', name: 'gender',
                    searchable: true, orderable: true
                },
                {
                    data: 'bod', name: 'bod',
                    searchable: true, orderable: true
                },
                {
                    data: 'location', name: 'location',
                    searchable: true, orderable: true
                },
                {
                    data: 'packagemcu', name: 'packagemcu',
                    searchable: true, orderable: true
                },
            ]
        };

function openToptenPersons(finding) {
            $('.toptenperson-finding').text(finding);
            $('#topTenPersonModal').modal('toggle');
            $('#tblToptenPersons').DataTable().destroy();
            $('#tblToptenPersons').DataTable(tblToptenPersons);
        }

now it's working inside modal and without modal

allan

Super - good to hear you got it working. Thanks for the update!

Allan