Ajax Datatable, column adjust working on only initial load

tonyko

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
**A button press triggers the code below. The columns of the table adjust properly on the initial button press, but any button presses afterwards, the reclalc code gets hit (line 68, column adjust), but the columns do not adjust. I have to refresh the page and click the button again for it to adjust.

I've tried to destroy the table both in the configuration and in the prior lines, but no avail.....Any help would be greatly appreciated. Thank you. **:

if ($.fn.DataTable.isDataTable('#userdirectory-table')) {
                $('#userdirectory-table').DataTable().clear().destroy();
            }

            // Instantiate jquery datatable
            var table = $('#userdirectory-table').DataTable({
                destroy: true,
                ajax: {
                    url: "AddApprover/?handler=ADlookup",
                    method: "POST",
                    beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: function () {
                        return adlist;
                    },
                    //data: function () {
                    //    return adlist;
                    //},
                    dataSrc: '',
                    // Uncomment below to debug request response from server.
                    //dataSrc: function (json) {
                    //    return json.data;
                    //}
                    error: function (xhr, error, thrown) {
                        //$("#gspinner-container").attr("style", "display: none !important");
                        cursordefault();
                        $("#userscontainer").hide();
                        $("#nousersfound").text("Internal server error.").show();
                    }
                },
                paging: false,
                searching: false,
                bInfo: false,
                //language: {
                //    "emptyTable": "No users found."
                //},
                columns: [
                    { data: "fullName", title: "Name" },
                    { data: "emailAddress", title: "Email" },
                    { data: "userName", title: "Username" },
                    { data: "decision", title: "System" },
                    { defaultContent: '<a href="#">Add</a>', title: "Add", className:"accept-btn text-center" },
                ],
                columnDefs: [
                    {
                        "targets": 4,
                        "className": "text-center",
                        orderable: false
                    }
                ],
                initComplete: function (settings, json) {
                    //console.log(json);
                    cursordefault();
                    if (table.rows().count() > 0) {
                        bindonclick(table);
                        $("#nousersfound").hide();
                        if (table.rows().count() == 1) {
                            $("#numofentries").text("Showing 1 entry");
                        }
                        else {
                            $("#numofentries").text("Showing " + table.rows().count() + " entries");
                        }
                        $("#userscontainer").show();
                        table.columns.adjust();
                    }
                    else {
                        $("#userscontainer").hide();
                        $("#nousersfound").show();
                    }
                }
            });

kthorngren

I would guess that the table variable is not ready for use, ie its undefined, in initComplete. You can look at the browser's console for errors. The best practice is to et an instance of the API and use that to access the Datatables API. Something like this:

                initComplete: function (settings, json) {
                    //console.log(json);
                    var api = this.api();
                    cursordefault();
                    if (api.rows().count() > 0) {
                        bindonclick(api);
                        $("#nousersfound").hide();
                        if (api.rows().count() == 1) {
                            $("#numofentries").text("Showing 1 entry");
                        }
                        else {
                            $("#numofentries").text("Showing " + api.rows().count() + " entries");
                        }
                        $("#userscontainer").show();
                        api.columns.adjust();
                    }
                    else {
                        $("#userscontainer").hide();
                        $("#nousersfound").show();
                    }
                }

Note that every place you reference table I changed to api. If this doesn't help then please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

tonyko

Thank you Kevin. However changing everything from table to api did not resolve the issue. I was in the process of submitting a test case when I saw the class "nowrap" in the sample test case.

I added it to my table element, and it upheld the column adjustment after the initial table load!!!!!

<div id="userscontainer">
            <table id="userdirectory-table" class="table table-striped table-bordered dt-responsive w-100 nowrap">
            </table>
            <div id="numofentries"></div>
        </div>