DataTable not populating on first load

ak11

Hello,
I have a button that passes an Id and opens a modal containing DataTable. On first click, I don't see the table getting to my populate method. Subsequent clicks lead to datatable being populated.

in my document.ready, I have

$("#myModal").on("shown.bs.modal", function () {              
                if (!initialized)    {    
                    initialized = true;
                    myTable = $('#myTable').DataTable({
                        "processing": true,
                       "serverSide": true,
                      order: [[1, "desc"]],
                       searchDelay: 1000,
                        deferLoading: 0,
                        scrollY: 300,
                       scrollCollapse: true,
                        columns: [                       
                            { data: "Col1" },
                            { data: "Col2" }
                        ], 
                        "ajax": {
                             "type": "POST",
                           "url": baseUrl + "api/Search/GetData",
                           "data": function (d) {
                                d.myId = myId;                          
                            }                       
                        },
                         preDrawCallback: function () {
                        if (dontMakeAjaxCall) {
                            dontMakeAjaxCall = false;
                            return false;
                        }
                        return true;
                    }
                });
            }
        });

    and my button click has

$(".OpenModal").click(function () {
            ..get my ID
            $('#myModal').modal('show');
            myTable.ajax.reload();           
        });

  thanks for your assistance

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

On first click, I don't see the table getting to my populate method

The first place I would look is the browser's Developer Tools Network to see the XHR request when you first click the button. Do you see the request? And what is the response?

Also instead of using if (!initialized) { you could use the $.fn.dataTable.isDataTable() API to see if the Datatable has been initialized.

After you show the modal you are using myTable.ajax.reload();. This could be causing a race condition on the first button click since it will try to reload while the initial Ajax request is being processed. Try removing it as a test to see if it helps with the first button click. Maybe you can move the myTable.ajax.reload(); into the shown.bs.modal event a s the else clause of your if statement, ie, if not initialized then init Datatables else reload.

Let us know what you find. If you still need help then we will likely need to look at the page to help debug. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ak11

Hello Kevin,

The datatable should load only on the button click since that is where I'm getting the ID that will retrieve the data.

If I remove myTable.ajax.reload() then how am i going to pass the ID to retrieve data?

kthorngren

My suggestion to remove myTable.ajax.reload() is simply to test the initial load to see if the reload is causing a race condition. Currently your code initializes Datatables, which performs an Ajax request, then immediately performs a reload. Effectively two requests for the same data. Not efficient plus it could be causing a race condition not allowing your inital table to load properly.

I would do something like this:

$("#myModal").on("shown.bs.modal", function () {             
                if ( ! $.fn.DataTable.isDataTable( '#myTable' )  )    {   
                    myTable = $('#myTable').DataTable({
                        "processing": true,
                       "serverSide": true,
                      order: [[1, "desc"]],
                       searchDelay: 1000,
                        deferLoading: 0,
                        scrollY: 300,
                       scrollCollapse: true,
                        columns: [                      
                            { data: "Col1" },
                            { data: "Col2" }
                        ],
                        "ajax": {
                             "type": "POST",
                           "url": baseUrl + "api/Search/GetData",
                           "data": function (d) {
                                d.myId = myId;                         
                            }                      
                        },
                         preDrawCallback: function () {
                        if (dontMakeAjaxCall) {
                            dontMakeAjaxCall = false;
                            return false;
                        }
                        return true;
                    } else {
                        myTable.ajax.reload();
                    }
                });
            }
        });

And remove myTable.ajax.reload(); from the click event.

Did you look at the Developer Tools?

Kevin

ak11

Thanks Kevin for your suggestions.

Keeping my original code, I looked at Network and first click does not call my GetData(). On second and subsequent clicks, it does.

removed myTable.ajax.reload(); from click event and modal loads with no data at all no matter first or subsequent clicks.

used your code snippet and it behaves like my code. No data on first click and data on subsequent clicks

kthorngren

I looked at Network and first click does not call my GetData().

Have you verified what happens on your first click? You showed only a snippet of what is in your click event. place some console.log statements in your click event and the shown.bs.modal event to see what is happening and verify that the code to initialize Datatables is executing when you expect

On second and subsequent clicks, it does.

Do you see one or two Ajax request on the second click? My guess is two; one for Datatables initializing and the other for the reload.

Basically you will need to follow the steps of your code to make sure it i is executing as expected.

Kevin

ak11

original code - no request was sent to WebMethod. However other pieces of data that I passed to modal in event click worked.

In your code - no request made at first click and ONLY one request in subsequent clicks.

HOWEVER, - I have this WORKING....

Based on your suggestions, I got the idea to initialize the datatable in document ready and

in $("#myModal").on("shown.bs.modal", function ()
I just call ajax.reload().
Removed ajax.reload from click.

The Reason why I did the above? Because doing the above also fixes the column header formatting issue that I was having.

When i had ajax.reload() in click and NOT in modal show, there was a formatting issue.

That seems to work. See only one request at a time

Unless you find something with my approach.

Wanted to give as much information as possible on my approach so that it could benefit others.

ak11

Thank you Kevin for your inputs, they were very helpful

kthorngren

Glad you got it working. Sounds like a good solution.

Kevin