How to make Ajax call to asp.net web services to pull data into DataTables?
How to make Ajax call to asp.net web services to pull data into DataTables?
Hi, I'm new to jQuery and DataTable, I'm wondering how to use DataTables in ASP.NET applications, especially how to make Ajax call to web service. You know the asp.net web service will return json like this:
[code]{"d":[{"__type":"DataAccessLayer.CustomerInfo","CustomerID":1,"Name":"Google","Subsidiary":"G","ConfigName":"Gconfig"}], ....}[/code]
DataTables will recognize this format as invalid.
Following is my client side code:
[code] $(document).ready(function () {
$("#CustomerTable").dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "WebServices/CustomerService.asmx/GetCustomers",
"fnServerData": function (sSource, aoData, fnCallBack) {
$.ajax({
type: "POST",
dataType: "json",
url: sSource,
//data: aoData,
contentType: "application/json; charset=utf-8",
success: fnCallBack
});
}
});
});[/code]
And my web service method:
[code] [WebMethod]
public List GetCustomers()
{
CustomInfoBll ci = new CustomInfoBll();
return ci.GetCustomers();
}[/code]
Could anybody guide me how to use DataTables AJAX in ASP.NET? Any help is appreciated! Thanks in advance!
Best Regards,
Sven [A guy from China]
[code]{"d":[{"__type":"DataAccessLayer.CustomerInfo","CustomerID":1,"Name":"Google","Subsidiary":"G","ConfigName":"Gconfig"}], ....}[/code]
DataTables will recognize this format as invalid.
Following is my client side code:
[code] $(document).ready(function () {
$("#CustomerTable").dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "WebServices/CustomerService.asmx/GetCustomers",
"fnServerData": function (sSource, aoData, fnCallBack) {
$.ajax({
type: "POST",
dataType: "json",
url: sSource,
//data: aoData,
contentType: "application/json; charset=utf-8",
success: fnCallBack
});
}
});
});[/code]
And my web service method:
[code] [WebMethod]
public List GetCustomers()
{
CustomInfoBll ci = new CustomInfoBll();
return ci.GetCustomers();
}[/code]
Could anybody guide me how to use DataTables AJAX in ASP.NET? Any help is appreciated! Thanks in advance!
Best Regards,
Sven [A guy from China]
This discussion has been closed.
Replies
This is assuming your json data is good, and does not need to be run through an asp.net to json serializer
The javascript:
[code]function getMyData() {
$.ajax({
type: "POST",
url: "url for json data",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: buildMyDatatable
});
function buildMyDatatable(result) {
// ASP.NET encapsulates JSON responses in a property "d", so remove it
if (result.hasOwnProperty("d")) { result = result.d; }
var data = jQuery.parseJSON(result);
$('#divformytable').html('');
$('#tablename').dataTable({
"bPaginate": true,
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"bJQueryUI": false,
"bLengthChange": true,
//"fnRowCallback": customFnRowCallback,
"aaData": data,
"aoColumns": [
//Assign the data to rows
{"mDataProp": "fieldname", "sTitle": "0", "bSearchable": false, "bVisible": true },
{"mDataProp": "anotherfieldname","sTitle": "1", "bSearchable": false, "bVisible": true }
]
})
}
[/code]
This works for me.
Thank you so much!
This also work for me when I commented this line:
[code]var data = jQuery.parseJSON(result);[/code]
But I have concern we didn't use the datatable sAjaxSource property, is there any other way to do this with the sAjaxSource property?
Did you try switching to the sAjaxSource? I have not tried it, or use sAjaxSource. Let me know if it works, or what errors you may receive. I can give it a try if you are not successful.
I tried but not success. The datatable prompt me that the json returned is invalid.
Regards
Kamaraj.P
Personally I don't have such an example, and I'm not aware of one. If you create one, I'm sure others will welcome you posting it online so we can all benefit.
Allan