buttons not showing when create datatable inside the bootstrap modal

buttons not showing when create datatable inside the bootstrap modal

drhardiandrhardian Posts: 3Questions: 1Answers: 0

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

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • drhardiandrhardian Posts: 3Questions: 1Answers: 0

    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

  • drhardiandrhardian Posts: 3Questions: 1Answers: 0

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

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

    Allan

Sign In or Register to comment.