Jquery Datatables and Jeditable - Data is not displaying

Question

I am using Jquery DataTables and jEditable. I have a correct JSON response as follows:

[{"country_id":"18","country":"Aruba","country_enabled":"1"},{"country_id":"19","country":"Afghanistan","country_enabled":null},{"country_id":"22","country":"Angola","country_enabled":"1"},{"country_id":"23","country":"Anguilla","country_enabled":null},{"country_id":"24","country":"\u00c5land Islands","country_enabled":null},{"country_id":"25","country":"Albania","country_enabled":null},{"country_id":"26","country":"Andorra","country_enabled":null},{"country_id":"27","country":"United Arab Emirates","country_enabled":null},{"country_id":"29","country":"Argentina","country_enabled":null},{"country_id":"30","country":"Armenia","country_enabled":null},{"country_id":"31","country":"American Samoa","country_enabled":null},{"country_id":"32","country":"Antarctica","country_enabled":null},{"country_id":"33","country":"French Southern Territories","country_enabled":null},{"country_id":"34","country":"Antigua and Barbuda","country_enabled":null},{"country_id":"35","country":"Australia","country_enabled":null},{"country_id":"36","country":"Austria","country_enabled":null},{"country_id":"37","country":"Azerbaijan","country_enabled":null},{"country_id":"38","country":"Burundi","country_enabled":null},{"country_id":"39","country":"Belgium","country_enabled":null},{"country_id":"40","country":"Benin","country_enabled":null},{"country_id":"41","country":"Bonaire, Sint Eustatius and Saba","country_enabled":null},{"country_id":"42","country":"Burkina Faso","country_enabled":null},{"country_id":"43","country":"Bangladesh","country_enabled":null},{"country_id":"44","country":"Bulgaria","country_enabled":null},{"country_id":"45","country":"zoo","country_enabled":null},{"country_id":"46","country":"Xylaphone","country_enabled":null}]

The above is taken from Chrome's developer tools and from the XHR window and, therefore, I know the response looks correct and the data is being received.

Here is my HTML to display the data:

<div class="content">
<div id="pad-wrapper" class="form-page">
    <div class="row">
        <div class="col-md-12">
            <h2>List of Countries</h2>
        </div>
        <div class="bs-example">
            </br>
            <form>
<div align = "left">
                <button type="button" class="btn btn-success" onclick="window.location='<?php echo site_url("admin/country_add");?>'">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Country
                </button>
                <button type="button" class="btn btn-danger" onclick="window.location='<?php echo site_url("admin/country_delete");?>'">
                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Delete Countries
                </button>
            </div>

            <!-- start table listing -->
     <table id="myDataTable">
    <thead>
        <tr>
            <th>country_id</th>
            <th>country</th>
            <th>country_enabled</th>
    </thead>

    <tbody>         
    </tbody>

</table>
<button id="btnAddNewRow">Add</button>
<button id="btnDeleteRow">Delete</button>
        </div>
    </div>
</div>

The datatable appears in the view but just says, "loading..." and no data is ever displayed.

I have renamed the column headers the same as my database but it still does not display the data.

There is an error in the console as follows: enter image description here

can you please check it out in console is their any error..? — lalitpatadiya
– lalitpatadiya, Commented Jun 13, 2015 at 9:11
I had added the console error. Not sure if related. Thanks for helping! — spreaderman
– spreaderman, Commented Jun 13, 2015 at 9:21
can your just refer "datatables.net/forums/discussion/6101/…" and "stackoverflow.com/questions/22470411/…" they also having problem like you — lalitpatadiya
– lalitpatadiya, Commented Jun 13, 2015 at 9:36

Gyrocode.com · Accepted Answer · 2015-06-13 15:19:21Z

1

In the client-side processing mode data provided via Ajax should have the following structure, see ajax option for more details.

{
    "data": [
        // row 1 data source,
        // row 2 data source,
        // etc
    ]
}

The solution is to correct your JSON data to look like:

{ 
    "data": [
        {"country_id":"18","country":"Aruba","country_enabled":"1"}
    ]
}

Alternative solution is to set ajax.dataSrc to empty string to indicate that you're returning plain array, see the sample code below:

$('#example').dataTable({
  "ajax": {
    "url": "data.json",
    "dataSrc": ""
  }
});

answered Jun 13, 2015 at 15:19

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

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

3 Comments

spreaderman Over a year ago

Indeed, the above solution worked. I am curious why data worked and when I use aaData it doesn't work. Thank you very much for the above solution!

Gyrocode.com Over a year ago

@user3264461, aaData is a property name of older version of DataTables 1.9. However, DataTables 1.10 is backward compatible and aaData should have worked, see ajax.dataSrc.

spreaderman Over a year ago

i tried again with aaData and it works. this is my code; function get_countries(){ $results = array(); $results['aaData'] = $this->db->select('country_id, country, country_enabled ') ->from('mhcountry') ->get() ->result(); return $results; }

Collectives™ on Stack Overflow

Jquery Datatables and Jeditable - Data is not displaying

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related