Unable to display data using jQuery datatables, AJAX and JSON

Question

I'm having a problem displaying my data on my jQuery DataTable using AJAX. I'm using the library from datatables.net. I've tried packaging the JSON in many different formats and nothing is working. I've also messed around with the 'columns' section, interchanging 'title' and 'data.' I only have one event to display for now, but the bottom of the table shows something crazy like 4,000 entries. Here is my code:

<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.js"></script>
<script type="text/javascript">   
    $(document).ready(function () {
                $('#myTable').DataTable({
                    "processing": true,
                    "ajax": {
                        "url": "/api/EventsApi/GetAll",
                        "dataSrc": ""
                    },
                    columns: [
                        { title: "Title" },
                        { title: "Template" },
                        { title: "Capacity" },
                        { title: "Boarding Location" },
                        { title: "Status" },
                        { title: "Edit / Delete" }
                        //{ "data": "title" },
                        //{ "data": "eventTemplateID" },
                        //{ "data": "locomotive.capacity" },
                        //{ "data": "boardingLocationStart.city" },
                        //{ "data": "status" },
                        //{ "data": "status" }
                    ]
                });
    });

    <div class="title-content">@ViewBag.Title</div>
        <div id="dataTable">
            <table id="myTable" class="table table-hover" style="text-align: center;">
                <tbody id="tBody">
                    <!-- Table body data goes here -->
                </tbody>
            </table>
        </div>

Here is the JSON that's being returned from the AJAX call:

{"data":[{"tripEventID":1,"extraDetails":"this train has special details","eventName":"ZombieTrainEventName ","departureDate":"\/Date(1443715200000)\/","returnDate":"\/Date(1443718800000)\/","eventCapacityOveride":100,"eventTemplateID":3,"title":"The Zombie Train ","companyID":1,"description":"description of zombie train ride ","boardingClosed":30,"status":1,"boardingLocationStart":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationStartTo":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationReturnFrom":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationReturnTo":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"allowFlexableReturnDate":false,"product":[],"productBundle":[{"bundleID":10,"companyID":1,"displayName":" Pumkin Bundle copy Test","price":0.0100,"tax":0.0200,"productList":[]}],"locomotive":{"trainID":1,"companyID":1,"title":"Skunk_Steam ","type":1,"description":"Steam locomotive ","capacity":998,"status":0},"media":{"mediaID":1,"companyID":1,"hero":[],"gallery":[{"mediaDetailID":6,"formatTypeID":2,"fileName":"testimage6.txt","order":1,"path":null,"url":null},{"mediaDetailID":7,"formatTypeID":2,"fileName":"testimage6.txt","order":1,"path":"path6","url":"url6"},{"mediaDetailID":8,"formatTypeID":2,"fileName":"testimage7.txt","order":1,"path":"path7","url":"url7"}],"inside":[{"mediaDetailID":1,"formatTypeID":1,"fileName":"testimage.txt","order":1,"path":null,"url":null},{"mediaDetailID":2,"formatTypeID":1,"fileName":"testimage2.txt","order":1,"path":null,"url":null},{"mediaDetailID":3,"formatTypeID":1,"fileName":"testimage3.txt","order":1,"path":null,"url":null}]},"duration":15,"isExclusive":false,"timeAtDestination":45,"isOneWay":false}]}

Like I said, I've tried repackaging the JSON as nested objects and arrays with nothing working. Am I missing something obvious? Any help is appreciated, thank you!

Gyrocode.com · Accepted Answer · 2015-12-01 13:07:12Z

2

You have to name the columns in your js like the json index keys like this:

$(document).ready(function() {
    $('#myTable').DataTable( {
        "ajax":  "path/to/your/file.json",
        "columns": [
            { "data": "title" },
            { "data": "eventTemplateID" },
            { "data": "eventCapacityOveride" },
            { "data": "boardingLocationStart.streetAddress" },
            { "data": "status" },
            { "data": null }
        ],
        "columnDefs": [ {
            "targets": -1,
            "data": null,
            "defaultContent": "<button>Click!</button>"
        } ]
    } );
} );

Note that you can define custom data in tables with the columnDefs option.

And than edit your HTML with something like this:

 <table id="myTable" class="table table-hover" style="text-align: center;">
    <thead>
        <tr>
            <th>Title</th>
            <th>Template</th>
            <th>Capacity</th>
            <th>Boarding location</th>
            <th>Status</th>
            <th>Edit / Delete</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
           <th>Title</th>
            <th>Template</th>
            <th>Capacity</th>
            <th>Boarding location</th>
            <th>Status</th>
            <th>Edit / Delete</th>
        </tr>
    </tfoot>
</table>

Here you can find a working fiddle

edited Dec 1, 2015 at 13:07

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

answered Nov 30, 2015 at 23:44

AndreaG

2391 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike in Coloma Over a year ago

Hey thanks for the quick and detailed response. I made the changes, and I see that it's working on fiddle, but for some reason I still can't get my code to work. The only thing that's populated is the last column with all the "Click!" buttons. It takes the page about 10 seconds to load, and then it alerts "DataTables warning: table id=mytable - Requested unknown parameter 'title' for row 0, column 0. For more information about this error, please see datatables.net/tn/4" -Thanks

AndreaG Over a year ago

it means that the script can't find the title key in the json to bind to the column 0. Are you sure that your code is loading properly the json? Look out if the chrome console throw some error (or firebug if you prefer). Are you on a webserver? Local usage coul'd not work. The whole json you pass to dtatables is valid json?

AndreaG Over a year ago

Or, if you are tring to load the json from an external url you have to configure the server that hosts the json to allow cross-origin access control

Mike in Coloma Over a year ago

Ok. I think the problem might be that I'm getting a string returned, with the JSON inside. Maybe if I can reverse stringify it and get rid of the quotes that make it a string. I will have to play with it later

RandomHandle Over a year ago

"You have to name the columns". This cannot be overemphasized.

Collectives™ on Stack Overflow

Unable to display data using jQuery datatables, AJAX and JSON

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related