php - Jquery Datatables and Jeditable - Data is not displaying -

i using jquery datatables , jeditable. have correct json response 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 , 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 , 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 taken chrome's developer tools , xhr window and, therefore, know response looks correct , data being received.

here html display 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 view says, "loading..." , no data ever displayed.

i have renamed column headers same database still not display data.

there error in console follows:

in client-side processing mode data provided via ajax should have following structure, see ajax option more details.

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

the solution correct json data like:

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

alternative solution set ajax.datasrc empty string indicate you're returning plain array, see sample code below:

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