How do I add parameters to an ajax call to an asp.net webservice in DataTables 1.10?
How do I add parameters to an ajax call to an asp.net webservice in DataTables 1.10?
I have been using DataTables for a while and it is a great and very powerful tool. Currently I am updating from version 1.9 to 1.10.4 and for the most part this is going well but in places where I am replacing "fnServerData" with "ajax" AND need to pass parameters I am not able to get the result returned. I am adding 2 samples below, one when no parameter is used (this works!) and one where a parameter needs to be passed (this does NOT work in the new version 1.10 as displayed here).
DataTables 1.9 (NO parameters)
window.oSomeDataTables = $('#SomeDataTables').dataTable({
"sDom": 'fplr<"clear">ti',
...
"bProcessing": true,
"bAutoWidth": false,
"aoColumns": [{ "sTitle": "Name", "sWidth": "160px", "sClass": "left", "bSortable": true },
{ "sTitle": "Id", "sWidth": "160px", "sClass": "left", "bSortable": true }],
"fnServerParams": function (aoData) {
aoData.push({}); // no parameters
},
"sAjaxSource": "DashService.asmx/GetSomeJsonString",
"fnInitComplete": function () {
// do something
},
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json) {
fnCallback(json);
}
});
}
});
DataTables 1.10.4 (NO parameters)
window.oSomeDataTables = $('#SomeDataTables').dataTable({
"dom": 'fplrti',
...
"processing": true,
"autoWidth": false,
"columns": [{ "title": "Name", "width": "160px", "className": "left", "orderable": true },
{ "title": "Id", "width": "160px", "className": "left", "orderable": true }],
"initComplete": function () {
// do something
},
"ajax": {
type: "POST",
url: "DashService.asmx/GetSomeJsonString"
}
});
DataTables 1.9 (WITH parameters)
window.oSomeOtherDataTables = $('#SomeOtherDataTables').dataTable({
"sDom": 'fplr<"clear">ti',
...
"bProcessing": true,
"bAutoWidth": false,
"aoColumns": [{ "sTitle": "Name", "sWidth": "160px", "sClass": "left", "bSortable": true },
{ "sTitle": "Id", "sWidth": "160px", "sClass": "left", "bSortable": true }],
"fnServerParams": function (aoData) {
aoData.push({ "name": "code", "value": $.Code }); // passing the param
},
"sAjaxSource": "DashService.asmx/GetSomeOtherJsonString",
"fnInitComplete": function () {
// do something
},
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json) {
fnCallback(json);
}
});
}
});
DataTables 1.10.4 (WITH parameters)
window.oSomeOtherDataTables = $('#SomeOtherDataTables').dataTable({
"dom": 'fplrti',
...
"processing": true,
"autoWidth": false,
"columns": [{ "title": "Name", "width": "160px", "className": "left", "orderable": true },
{ "title": "Id", "width": "160px", "className": "left", "orderable": true }],
"initComplete": function () {
// do something
},
"ajax": {
type: "POST",
url: "DashService.asmx/GetSomeOtherJsonString",
data: "{'code': '" + $.Code + "'}" // THIS DOES NOT WORK !!!
}
});
asp.Net Web Method returning SomeOtherJsonString = { "data": [["FirstName","FirstId"],...,["LastName","LastId"]] }
[WebMethod]
[ScriptMethod(UseHttpGet = false, XmlSerializeString = true, ResponseFormat = ResponseFormat.Json)]
public void GetSomeOtherJsonString(string code)
{
var SomeOtherJsonString = "{ \"data\": ["; // start DataTables JSON Formatting
// get the Json string:
SomeOtherJsonString = string.Concat(SomeOtherJsonString, "] }"); // finish DataTables JSON Formatting
HttpContext.Current.Response.Write(SomeOtherJsonString);
}
For now I can keep it working by mixing the old with the new API. What am I missing here where I am passing the parameters?