Display records from database on page load using ajax and datatables 1.9.

drchanix

Hi. I am new to DataTables. I need some help.
On page load, I call ajax to pull records from the database. --> Working fine.
How can I achieve displaying the records using the datatables?

Here are my references:








Here is my html:





First Name
Last Name
Email









Here is my ajax:
$(document).ready(function () {
$.getJSON("GetMethod", "", function (data) {
$.each(data, function (value) {
$(""
+ value["FirstName"]
+ ""
+ value["LastName"]
+ ""
+ value["Email"]
+ "")
.appendTo("#tbodyTest");
});
});
$('#tableList').dataTable({
"sPaginationType": "full_numbers",
"bDestroy": true
});
});

The result:
Show 10 entries (showing) Search box (showing)
First Name Last Name Email (table headers)
No data available in table
FName1 LName1 Email1@test.com
FName2 LName2 Email2@test.com
FName3 LName3 Email3@test.com

Showing 0 to 0 of 0 entries (navigation buttons)




Any help will do.

Thanks.

drchanix

Got it working. There's problem the way I setup my ajax.
Updated code:
$.getJSON("GetMethod", "", function (data) {
$.each(data, function (value) {
$(""
+ value["FirstName"]
+ ""
+ value["LastName"]
+ ""
+ value["Email"]
+ "")
.appendTo("#tbodyTest");
});
});

$(document).ready(function () {
$('#tableList').dataTable({
"sPaginationType": "full_numbers",
"bDestroy": true
});
});

drchanix

I am having another issue with this current code. Sometimes the datatables is not displaying properly. When I refresh the browser (Firefox, IE, Chrome) every now and then, the datatables will display properly. Then when I refresh it again, it will not display properly. It seems the ready function is called even though the GetMethod is not yet done.
Kindly help me.
Thanks.

drchanix

This issue has been resolved here, http://datatables.net/forums/discussion/9610/how-to-display-returned-records-from-jsonresult-in-mvc.net#Item_9.
And thanks to Allan for the great help.