How to populate my data table with JSON data from Webservice?

anuradhakj · June 2014

Hi

I have a created a rest webservice, which returns below JSON based on the search

[{"street":"","city":"HOUSTON ","countyCode":"201","countyName":"HARRIS ","stateCode":"TX","stateName":"","zip":"77070","countryName":"","taxAuthShipto":"TX7707000","shipToCityLimit":"0","geoCode":"00","cityIndicator":"0"},
{"street":"","city":"HOUSTON ","countyCode":"201","countyName":"HARRIS ","stateCode":"TX","stateName":"","zip":"77070","countryName":"","taxAuthShipto":"TX7707001","shipToCityLimit":"1","geoCode":"01","cityIndicator":"1"},
{"street":"","city":"WILLOW PLACE ","countyCode":"201","countyName":"HARRIS ","stateCode":"TX","stateName":"","zip":"77070","countryName":"","taxAuthShipto":"TX7707003","shipToCityLimit":"0","geoCode":"03","cityIndicator":"0"}]

I have a search form. Once i click the search button, my search parameters are formed as JSON and passed to webservice through the ajax call and i want to show the results from webservice ( sample is pasted above) in data table. Please help me how to write $('#test').dataTable({ //what to write here })

Thanks
Anuradha K J

anag · June 2014

Links below are from the current documentation, you should be able to come up with working code if you've coded your own webservice.

See: "Get JSON data from a file via Ajax.:"
https://datatables.net/reference/option/ajax

https://datatables.net/reference/api/ajax.json()

See the link in the FAQ JSON Question for technical debugging
http://datatables.net/faqs/#json

anuradhakj · June 2014

Thanks Anag.. But i tried below things.. its not even hitting my webservice

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

<title>DataTables example - Form inputs</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">

</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">

$(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;

        alert(jsonData);



        $('#example').dataTable( {
            "ajax": {
            type: "POST",
            dataType: "json",
            data :JSON.stringify(formData),
            contentType: "application/json",
            url:"http://localhost:7001/WSVzipTaxwareClient/testService/testPostJSON"
            }
        } );

});

} );

</script>
</head>

State Code

AA - ARMED FORCES AMERICAS AE -ARMED FORCES EUROPE AK -ALASKA AL -ALABAMA

Zip Code

City Name

County Name

Col 1	Col 2	Col 3	Col 4	Col 5	Col 6	Col 7	Col 8
Col 1	Col 2	Col 3	Col 4	Col 5	Col 6	Col 7	Col 8

</body>
</html>

anuradhakj · June 2014

// My Input to webservice : turn the jsonData object into a string so it can be passed to the webservice
var jsonData = JSON.stringify(jsonDataObject);
jQuery.support.cors = true;
$('#example').dataTable( {
"ajax": {
"type": "POST",
"data" :jsonData,
"url":"http://localhost:7001/WSVzipTaxwareClient/testService/testPostJSON",
}
} );

Giving canot reinitialise data table alert

How to populate my data table with JSON data from Webservice?

How to populate my data table with JSON data from Webservice?

Answers

Howdy, Stranger!

Categories

DataTables

How to populate my data table with JSON data from Webservice?

How to populate my data table with JSON data from Webservice?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables