My First datatable

bumblebee

All,

I am trying to create my first datatable and having some issue. It is a simple table.

I have some JSON data in a Javascript variable and trying to get that loaded in the grid. I got an error that it has some null value and so added default content. Now all rows are empty. Any idea what I am doing wrong.

Here is the code I am doing. Not sure why I do not see any data
Data

var TestData = "{\"data\":[{\"id\":45,\"name\":\"Oregon\",\"label\":\"Oregon\",\"abbreviation\":\"OR\",\"capital\":\"Salem\",\"Today\":\"2013/11/04\"},{\"id\":46,\"name\":\"Pennsylvania\",\"label\":\"Pennsylvania\",\"abbreviation\":\"PA\",\"capital\":\"Harrisburg\",\"Today\":\"2013/11/04\"},{\"id\":47,\"name\":\"Puerto Rico\",\"label\":\"Puerto Rico\",\"abbreviation\":\"PR\",\"capital\":\"San Juan\",\"Today\":\"2013/11/04\"},{\"id\":48,\"name\":\"Rhode Island\",\"label\":\"Rhode Island\",\"abbreviation\":\"RI\",\"capital\":\"Providence\",\"Today\":\"2013/11/04\"},{\"id\":49,\"name\":\"South Carolina\",\"label\":\"South Carolina\",\"abbreviation\":\"SC\",\"capital\":\"Columbia\",\"Today\":\"2013/11/04\"},{\"id\":50,\"name\":\"South Dakota\",\"label\":\"South Dakota\",\"abbreviation\":\"SD\",\"capital\":\"Pierre\",\"Today\":\"2013/11/04\"},{\"id\":51,\"name\":\"Tennessee\",\"label\":\"Tennessee\",\"abbreviation\":\"TN\",\"capital\":\"Nashville\",\"Today\":\"2013/11/04\"},{\"id\":52,\"name\":\"Texas\",\"label\":\"Texas\",\"abbreviation\":\"TX\",\"capital\":\"Austin\",\"Today\":\"2013/11/04\"},{\"id\":53,\"name\":\"Utah\",\"label\":\"Utah\",\"abbreviation\":\"UT\",\"capital\":\"Salt Lake City\",\"Today\":\"2013/11/04\"},{\"id\":54,\"name\":\"Vermont\",\"label\":\"Vermont\",\"abbreviation\":\"VT\",\"capital\":\"Montpelier\",\"Today\":\"2013/11/04\"},{\"id\":55,\"name\":\"Virgin Islands, U.S.\",\"label\":\"Virgin Islands, U.S.\",\"abbreviation\":\"VI\",\"capital\":\"Charlotte Amalie\",\"Today\":\"2013/11/04\"},{\"id\":56,\"name\":\"Virginia\",\"label\":\"Virginia\",\"abbreviation\":\"VA\",\"capital\":\"Richmond\",\"Today\":\"2013/11/04\"},{\"id\":57,\"name\":\"Washington\",\"label\":\"Washington\",\"abbreviation\":\"WA\",\"capital\":\"Olympia\",\"Today\":\"2013/11/04\"},{\"id\":58,\"name\":\"West Virginia\",\"label\":\"West Virginia\",\"abbreviation\":\"WV\",\"capital\":\"Charleston\",\"Today\":\"2013/11/04\"},{\"id\":59,\"name\":\"Wisconsin\",\"label\":\"Wisconsin\",\"abbreviation\":\"WI\",\"capital\":\"Madison\",\"Today\":\"2013/11/04\"},{\"id\":60,\"name\":\"Wyoming\",\"label\":\"Wyoming\",\"abbreviation\":\"WY\",\"capital\":\"Cheyenne\",\"Today\":\"2013/11/04\"}";

Javascript

function displayStateInfo( ) {
        
    $(document).ready(function() {
 
 
    $('#example').dataTable( {
    
   
        "data": TestData,
        "columns": [
            { "data": "name", "defaultContent": "" },
            { "data": "label", "defaultContent": "" },
            { "data": "abbreviation", "defaultContent": "" },
            
                  
        ]
           
    } ); 
    
  
} );
}

    
    

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>name</th>
                <th>level</th>
                <th>abbreviation</th>
                
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>name</th>
                <th>level</th>
                <th>abbreviation</th>
                
            </tr>
        </tfoot>
    </table>

allan

TestData is a string - not a JSON object. Also for data you should be passing in an array, not an object.

Try:

var TestData = [
    {
        "id": 45,
        "name": "Oregon",
        "label": "Oregon",
        "abbreviation": "OR",
        "capital": "Salem",
        "Today": "2013/11/04"
    },
    {
        "id": 46,
        "name": "Pennsylvania",
        "label": "Pennsylvania",
        "abbreviation": "PA",
        "capital": "Harrisburg",
        "Today": "2013/11/04"
    },
    {
        "id": 47,
        "name": "Puerto Rico",
        "label": "Puerto Rico",
        "abbreviation": "PR",
        "capital": "San Juan",
        "Today": "2013/11/04"
    },
    {
        "id": 48,
        "name": "Rhode Island",
        "label": "Rhode Island",
        "abbreviation": "RI",
        "capital": "Providence",
        "Today": "2013/11/04"
    },
    {
        "id": 49,
        "name": "South Carolina",
        "label": "South Carolina",
        "abbreviation": "SC",
        "capital": "Columbia",
        "Today": "2013/11/04"
    },
    {
        "id": 50,
        "name": "South Dakota",
        "label": "South Dakota",
        "abbreviation": "SD",
        "capital": "Pierre",
        "Today": "2013/11/04"
    },
    {
        "id": 51,
        "name": "Tennessee",
        "label": "Tennessee",
        "abbreviation": "TN",
        "capital": "Nashville",
        "Today": "2013/11/04"
    },
    {
        "id": 52,
        "name": "Texas",
        "label": "Texas",
        "abbreviation": "TX",
        "capital": "Austin",
        "Today": "2013/11/04"
    },
    {
        "id": 53,
        "name": "Utah",
        "label": "Utah",
        "abbreviation": "UT",
        "capital": "Salt Lake City",
        "Today": "2013/11/04"
    },
    {
        "id": 54,
        "name": "Vermont",
        "label": "Vermont",
        "abbreviation": "VT",
        "capital": "Montpelier",
        "Today": "2013/11/04"
    },
    {
        "id": 55,
        "name": "Virgin Islands, U.S.",
        "label": "Virgin Islands, U.S.",
        "abbreviation": "VI",
        "capital": "Charlotte Amalie",
        "Today": "2013/11/04"
    },
    {
        "id": 56,
        "name": "Virginia",
        "label": "Virginia",
        "abbreviation": "VA",
        "capital": "Richmond",
        "Today": "2013/11/04"
    },
    {
        "id": 57,
        "name": "Washington",
        "label": "Washington",
        "abbreviation": "WA",
        "capital": "Olympia",
        "Today": "2013/11/04"
    },
    {
        "id": 58,
        "name": "West Virginia",
        "label": "West Virginia",
        "abbreviation": "WV",
        "capital": "Charleston",
        "Today": "2013/11/04"
    },
    {
        "id": 59,
        "name": "Wisconsin",
        "label": "Wisconsin",
        "abbreviation": "WI",
        "capital": "Madison",
        "Today": "2013/11/04"
    },
    {
        "id": 60,
        "name": "Wyoming",
        "label": "Wyoming",
        "abbreviation": "WY",
        "capital": "Cheyenne",
        "Today": "2013/11/04"
    }
];

Allan

bumblebee

@Allan Thanks for your reply. Should I use aaData for object and try it like this?

"aaData": TestData,
"aoColumns": [
{ "sTitle": "Name", "mDataProp": "name" },
{ "sTitle": "Level", "mDataProp": "label" },
{ "sTitle": "Abbreviation", "mDataProp": "abbreviation" },

For now I am testing with a the TestData, but I need to use a webservice to get the data and it is mostly in a JSON objects & array.

bumblebee

@Allan, it worked. On another note, where can I find documentation on when to use aaData and Ajax.