How to make Ajax call to asp.net web services to pull data into DataTables?

sven329

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]

gbroke

Here is how I do it:
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.

sven329

hello gbroke,
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?

gbroke

Hi Sven,

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.

sven329

Hi gbroke,
I tried but not success. The datatable prompt me that the json returned is invalid.

sharmanic2002

Can Some one help me with Classic ASP Ajax Database Example

kamarajp

I need a complete crud sample for asp.net web application (Not mvc, not wcf).
Regards
Kamaraj.P

allan

@kamarajp - Please don't cross post - it specifically says that in the forum rules.

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