datatables checkbox not showing in modal popup bootstrap 4

datatables checkbox not showing in modal popup bootstrap 4

ArianArian Posts: 6Questions: 3Answers: 0

I'm creating a table and applying DataTable all dynamically showing the table in a modal window using Nakupanda DialogMessage (same issue happen with regular bootstrap modal window). Now my only issue is that checkboxes are not being displayed in the modal window, if I show the table not in the modal window it shows perfectly. I was checking and in the modal window, class dt-checkboxes-cell is missing as well as the input type checkbox not sure why.

Below is my sample code:

$('#showinmodal').click(function() {
    // --- BootstrapDialog Message ---
    var queryMsg = $("<div/>");
    
    var tableQueries = $("<table/>", {
        "id": "t_queries",
        "class": "display",
        "style": "width:100%"
    });
    
    tableQueries.append("<thead><tr><th></th><th>Name</th><th>Lastname</th></tr></thead><tbody><tr><td>1</td><td>A1</td><td>B1</td></tr><tr><td>2</td><td>A2</td><td>B2</td></tr><tr><td>3</td><td>A3</td><td>B3</td></tr></tbody>");
    tableQueries.appendTo(queryMsg);
    // --- End BootstrapDialog Message ---  

    tableQueries.DataTable({
        "order": [],
        "columnDefs": [                     
            {
                "targets": 0,
                "checkboxes": {
                    "selectRow": true
                }                               
            }                        
        ],
        "select": {
            "style": "multi"
        },
        "order": [[1, 'asc']],                      
        "paging": true,
        "fnInitComplete": function() {
            showDialog(queryMsg);
        }
    });         
    
    function showDialog(queryMsg) {
        BootstrapDialog.show({
            title: "Title",
            message: queryMsg,
            size: BootstrapDialog.SIZE_WIDE,
            closable: false,
            buttons: [{
                label: "Submit",
                cssClass: 'btn-primary',
                action: function(dialogRef) {
                    dialogRef.close();                              
                }
            }, {
                label: "Close",
                action: function(dialogRef) {
                    dialogRef.close();
                }
            }]
        });
    }
});

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,344Questions: 26Answers: 4,954
    Answer ✓

    Looks like you are using the Gyrocode Checkboxes plugin. You may need to check with the developer of that plugin to understand why its not working.

    I was checking and in the modal window, class dt-checkboxes-cell is missing as well as the input type checkbox not sure why.

    Without being able to see the issue it will be very difficult to help and offer suggestions. Please post a link to your page or a test case replicating the issue so we can take a look.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

This discussion has been closed.