buttons not showing when create datatable inside the bootstrap modal

drhardian · November 2023

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 · November 2023

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 · November 2023

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 · November 2023

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 · November 2023

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

Allan

buttons not showing when create datatable inside the bootstrap modal

buttons not showing when create datatable inside the bootstrap modal

Answers

Howdy, Stranger!

Categories

DataTables

buttons not showing when create datatable inside the bootstrap modal

buttons not showing when create datatable inside the bootstrap modal

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables