Please help me in filling the data table with json data in a search form
Please help me in filling the data table with json data in a search form
- I have a simple search form. with button. On click of the button, i m converting json representation of input and send it to webservice through ajax
- I m getting the response from the webervice as json
- i m unable to fill this json data in the datatable
please see the code below
$(document).ready(function() {
var table = $('#example').DataTable();
$("#submitButton").click(function(){
var stateCode= $('#stateCode').val();
var zipCode= $('#zipCode').val();
var cityName= $('#cityName').val();
var countyName= $('#countyName').val();
var jsonDataObject = new Object();
jsonDataObject.stateCode = stateCode==null?"":stateCode;
jsonDataObject.zip = zipCode==null?"":zipCode;
jsonDataObject.city = cityName==null?"":cityName;
jsonDataObject.countyName = countyName==null?"":countyName;
// turn the jsonData object into a string so it can be passed to the webservice
var jsonData = JSON.stringify(jsonDataObject);
jQuery.support.cors = true;
$.ajax({
type: "POST",
dataType: "json",
data :jsonData,
contentType: "application/json",
url:"http://localhost:7001/WSVzipTaxwareClient/taxwareservice/xmljson",
success: AjaxGetFieldDataSucceeded,
error: function(jqXHR, textStatus, errorThrown){
alert('Fail : '+errorThrown);
}
});
});
} );
function AjaxGetFieldDataSucceeded(result) {
if (result != "[]") {
var dataTab = JSON.stringify(result.aaData);
$('#example').dataTable({
"aaData": dataTab,
"bRetrieve": true,
"aoColumns": [{
"mDataProp": "stateCode"
}, {
"mDataProp": "city"
}, {
"mDataProp": "countyName"
}, {
"mDataProp": "countyCode"
}, {
"mDataProp": "zip"
},{
"mDataProp": "geoCode"
},{
"mDataProp": "cityIndicator"
},
{
"mDataProp": "taxAuthShipto"
}
]
});
}
}