Datatable Ajax Url Parameter

jptrue

Hello,

I am having an issue binding data to a datatable when passing in the url to an ajax call.

When running the following code databable 'example' throws this alert twice:
** DataTables warning: table id=example - Requested unknown parameter '0' for row 0, column 0.**

However, if i pass the data directly to the ajax call for datatable 'example2', it works great.

Here is some code that shows a working and non-working example:

JAVASCRIPT

            // NOT WORKING
            // DataTables warning: table id=example - Requested unknown parameter '0' for row 0, column 0.
            $(document).ready(function() {
                $('#example').dataTable( {
                    "ajax": {
                        "url": "json.data",
                        "type": "GET",
                        "cache": true,
                        "columns": [
                            { "data": "id" },
                            { "data": "name" },
                            { "data": "description" },
                            { "data": "createdAt" },
                            { "data": "updatedAt" }
                        ],
                        "complete": function(xhr, status){
                            console.log(xhr.responseText);
                            console.log(status);
                        }
                    }
                } );

                // THIS IS WORKING GREAT
                $('#example2').DataTable( {
                    "ajax": "json.data",
                    "columns": [
                        { "data": "id" },
                        { "data": "name" },
                        { "data": "description" },
                        { "data": "createdAt" },
                        { "data": "updatedAt" }
                    ]
                } );
            } );

HTML

    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>id</th>
                <th>Name</th>
                <th>Description</th>
                <th>Created</th>
                <th>Updated</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>id</th>
                <th>Name</th>
                <th>Description</th>
                <th>Created</th>
                <th>Updated</th>
            </tr>
        </tfoot>
    </table>
    <table id="example2" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>id</th>
                <th>Name</th>
                <th>Description</th>
                <th>Created</th>
                <th>Updated</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>id</th>
                <th>Name</th>
                <th>Description</th>
                <th>Created</th>
                <th>Updated</th>
            </tr>
        </tfoot>
    </table>

JSON

{
"data":[
  {
    "experiments": [
      {
        "name": "Animation",
        "description": "test",
        "group": 1,
        "createdAt": "2015-10-22T02:10:53.691Z",
        "updatedAt": "2015-11-08T03:41:08.173Z",
        "id": 2,
        "build_number": "1.a.0032",
        "url": "experiments/svg/saves.svg"
      },
      {
        "name": "Technical Drawing",
        "description": "test",
        "group": 1,
        "createdAt": "2015-10-31T22:39:31.374Z",
        "updatedAt": "2015-11-08T04:05:46.258Z",
        "id": 3,
        "build_number": "1.a.0033",
        "url": "experiments/svg/vacumatic.svg"
      },
      {
        "name": "KeySpline Animation",
        "description": "test",
        "group": 1,
        "url": "experiments/svg/escapement.html",
        "build_number": "1.a.0034",
        "createdAt": "2015-11-08T04:09:56.049Z",
        "updatedAt": "2015-11-08T04:09:56.049Z",
        "id": 4
      }
    ],
    "name": "SVG (Scalable Vector Graphics)",
    "description": "SVG animation tests.",
    "createdAt": "2015-10-22T02:05:02.156Z",
    "updatedAt": "2015-11-08T03:08:32.662Z",
    "id": 1
  },
  {
    "experiments": [
      {
        "name": "Sails JS",
        "description": "Building a restful api with Sails JS",
        "group": 2,
        "url": "https://api.jptrue.com",
        "build_number": "1.a.0035",
        "createdAt": "2015-11-10T03:04:31.383Z",
        "updatedAt": "2015-11-10T03:22:03.192Z",
        "id": 6
      }
    ],
    "name": "API (Application Program Interface)",
    "description": "API tests.",
    "createdAt": "2015-10-22T02:06:55.339Z",
    "updatedAt": "2015-11-08T03:09:39.163Z",
    "id": 2
  },
  {
    "experiments": [
      {
        "name": "Dynamically generated alerts",
        "description": "test",
        "group": 3,
        "url": "experiments/bootstrap/alert.html",
        "build_number": "1.a.0035",
        "createdAt": "2015-11-08T04:40:56.812Z",
        "updatedAt": "2015-11-08T04:40:56.812Z",
        "id": 5
      }
    ],
    "name": "Bootstrap",
    "description": "Scalable Vector Graphics",
    "createdAt": "2015-10-31T22:38:50.180Z",
    "updatedAt": "2015-11-08T04:39:37.239Z",
    "id": 3
  }
]
}

Any ideas on fixing this issue are greatly appreciated.

Thanks,
Jeff

DirceuNazareth

In the first your columns are inside of ajax object. Try it instead:

$('#example').dataTable( {
        "ajax": {
             "url": "json.data",
             "type": "GET",
             "cache": true,
             "complete": function(xhr, status){
                    console.log(xhr.responseText);
                    console.log(status);
              }
            },
            "columns": [
                { "data": "id" },
                { "data": "name" },
                { "data": "description" },
                { "data": "createdAt" },
                { "data": "updatedAt" }
            ]
} );

jptrue

Genius!

That worked perfectly.

Thanks again for the assist DirceuNazareth!

Jeff