DataTable functions not working from table initialised outwith document ready

NicoleStrain07

Error messages shown:
15 tests complete. 1 problem was found:
Table ID Problem description
- Using FixedHeader without setting a meta tag to "user-scalable=no" will mean that FixedHeader does not work on Android devices as position:fixed is disabled in the browser under those conditions. Either add a suitable meta tag, or be aware that FixedHeader will not operate for Android users.

Debugger code (debug.datatables.net):
https://debug.datatables.net/ogagob

Hello

I was initially loading my datatable in document ready which was working great however I was hoping to load it in a separate function as the table can be refreshed with new data and I would prefer to do this without loading the full page again.

The way I have set up just now is working and loading the table correctly however some of my other functions such as select rows will no longer work.

I have tried a few different things such as keeping the initialise code in document ready and doing a data table reload in my GetCaseLibary function but still no luck.

Could someone please offer some advice?

var table;
$(document).ready(function() {
    $.fn.dataTable.moment('DD/MM/YYYY');

    GetCaseLibary("Main");

    //    table = $('#dtable').DataTable({
    //    "dom": 'fltip',
    //    "info": true,
    //    "iDisplayLength": 20,
    //    "aLengthMenu": [[20, 50, 100, 150, -1], [20, 50, 100, 150, "All"]],
    //    language: {
    //        searchPlaceholder: "Search Explorer", search: ""
    //    },
    //    initComplete: function () {
    //        this.api().columns([2, 4, 7, 8]).every(function () {
    //            var column = this;
    //            var colTitle = this.header().innerHTML;
    //            var select = $('<select><option value="">' + colTitle + '</option></select>')
    //                .appendTo($(column.header()).empty())
    //                .on('change', function () {
    //                    var val = $.fn.dataTable.util.escapeRegex(
    //                        $(this).val()
    //                    );

    //                    column
    //                        .search(val ? '^' + val + '$' : '', true, false)
    //                        .draw();
    //                });

    //            column.data().unique().sort().each(function (d, j) {
    //                select.append('<option value="' + d + '">' + d + '</option>')
    //            });
    //        });
    //    },
    //    order: [[8, 'desc']],
    //});
    //$('div.dataTables_filter input').addClass('form-control pointer');
    //table.columns.adjust().draw();


}

});

// End Document Ready




$('#dtable tbody').on('mousedown', 'tr', function(e) {

  //Works when datatable is initlised in document ready

});

function GetCaseLibary(folder, caseNumber) {

     //caseNumber can be null and populate from session data

    Swal.fire({
        title: "Loading Case Files",
        didOpen: () => {
            Swal.showLoading()
            $.ajax({
                type: "GET",
                url: '@Url.Action("GetCaseLibary", "Home")',
                data: {
                    'folder': folder,
                    'caseNumber': caseNumber
                },
                contentType: "application/json; charset=utf-8",
                dataType: "html",
                success: function(response) {



                    Swal.hideLoading()
                    Swal.close();


                    $('#main').html(response);


                    table = $('#dtable').DataTable({
                        "dom": 'fltip',
                        "info": true,
                        "iDisplayLength": 20,
                        "aLengthMenu": [
                            [20, 50, 100, 150, -1],
                            [20, 50, 100, 150, "All"]
                        ],
                        language: {
                            searchPlaceholder: "Search Explorer",
                            search: ""
                        },
                        initComplete: function() {
                            this.api().columns([2, 4, 7, 8]).every(function() {
                                var column = this;
                                var colTitle = this.header().innerHTML;
                                var select = $('<select><option value="">' + colTitle + '</option></select>')
                                    .appendTo($(column.header()).empty())
                                    .on('change', function() {
                                        var val = $.fn.dataTable.util.escapeRegex(
                                            $(this).val()
                                        );

                                        column
                                            .search(val ? '^' + val + '$' : '', true, false)
                                            .draw();
                                    });

                                column.data().unique().sort().each(function(d, j) {
                                    select.append('<option value="' + d + '">' + d + '</option>')
                                });
                            });
                        },
                        order: [
                            [8, 'desc']
                        ],
                    });
                    $('div.dataTables_filter input').addClass('form-control pointer');
                    table.columns.adjust().draw();


                }
            })
        }

    }, 10000);


}
`

allan

I think we're going to need a link to a test case for this one please. You can use https://live.datatables.net or JSFiddle if you can't link to your page directly.

Allan