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

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

anuradhakjanuradhakj Posts: 5Questions: 3Answers: 0

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

Answers

  • anaganag Posts: 48Questions: 2Answers: 7
    edited 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

  • anuradhakjanuradhakj Posts: 5Questions: 3Answers: 0

    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>

    <body class="dt-example">

    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>

  • anuradhakjanuradhakj Posts: 5Questions: 3Answers: 0

    // 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

This discussion has been closed.