DataTable not populating on first load
DataTable not populating on first load
ak11
Posts: 14Questions: 6Answers: 0
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
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
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 themyTable.ajax.reload();into theshown.bs.modalevent 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
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?
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:
And remove
myTable.ajax.reload();from the click event.Did you look at the Developer Tools?
Kevin
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
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.modalevent to see what is happening and verify that the code to initialize Datatables is executing when you expectDo 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
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.
Thank you Kevin for your inputs, they were very helpful
Glad you got it working. Sounds like a good solution.
Kevin