How do i use an Multidimentional Array to push as rows to my table?

Psike2k15

Good Morning,
I´m struggling with reloading data out of an Associative Array
I get data out of my DB to show markers on an Google Map based on moving the view-port the new visible data gets called from my DB.
At the same time i´m pushing the data to my table, but this is to slow and infinity scrolling is not working.
Therefor i thought its better to push everthiong into an Array and push only that this array as new row.

                          var rows = {
                              "Name":name,
                              "Phone":phone,
                              "Website":website,
                              "Type":type,
                              "Country":address,
                              "lat":lat,
                              "lon":lon
                          }
                          tbdata.push(rows);

            if (tbdata.length > 0) {
            table.row.add(tbdata).draw();
            }

But i get the following errow: DataTables warning: table id=TBresults - Requested unknown parameter '2' for row 0, column 2. For more information about this error, please see http://datatables.net/tn/4

My Console log --> Array [ Object, Object ]

Every Object looks than like expected

A new Ajax call against the database will case to mush delay, therefore want to stick to one Ajax call based on moving the map.

My Table is initialized like this:

        table = $('#TBresults').DataTable( {
            "bFilter": false,
            "bLengthChange": false,
            "bSearchable": false,
                        "bSortable": false,
            "deferRender":    true,
            "scrollY":        200,
            "scrollCollapse": true,
            "scroller":       true,
            columns: [
                        { title: "Name" },
            { title: "Phone" },
            { title: "Website" },
            { title: "Type" },
                        { title: "Country" },
            {
                title: "lat",
                "visible": false

            },
            {
                title: "lon",
                "visible": false
            }
            ]
        });

Any idea why i´m not able to push an array into my rows?

allan

You need to use columns.data to tell DataTables where to get the data for each column from your data object. See the manual documentation} on this topic.

Allan

Psike2k15

Thanks for answering but it seems that i´m doing something wrong.

Example: https://jsfiddle.net/b1ts3d9w/2/

This is how i adjusted my table ini.

table = $('#TBresults').DataTable( {
            "bFilter": false,
            "bLengthChange": false,
            "bSearchable": false,
            "bSortable": false,
            "deferRender":    true,
            "scrollY":        200,
            "scrollCollapse": true,
            "scroller":       true,
            "columns": [
            {
                "title": "Name",
                "data": "Name"
            },
            { 
                "title": "Phone",
                "data": "Phone"
            },
            { 
                "title": "Website",
                "data": "Website"
            },
            {
                "title": "Type",
                "data": "Type"
            },
            {
                "title": "Address",
                "data": "Address"
            },
            {
                "title": "lat",
                "visible": false,
                "data": "lat"
            },
            {
                "title": "lon",
                "visible": false,
                "data": "lon"
            }
            ]
        });

My Data Object remains as in the beginning,
The row push Data looks like this:

[
   {
      "Name":"Zkh. Maas & Kempen",
      "Phone":"+3289509200",
      "Website":"http://www.zmk.be/",
      "Type":"General hospital",
      "Address":"Belgium",
      "lat":"51.09573",
      "lon":"5.795289"
   },
   {
      "Name":"Ziekenhuis Maas en Kempen (Maaseik)",
      "Phone":"",
      "Website":"http://www.zmk.be/",
      "Type":"General Hospital",
      "Address":"Belgium",
      "lat":"51.09573",
      "lon":"5.795289"
   },
   {
      "Name":"Zkh. Maas & Kempen",
      "Phone":"+3289509200",
      "Website":"http://www.zmk.be/",
      "Type":"General hospital",
      "Address":"Belgium",
      "lat":"51.09573",
      "lon":"5.795289"
   },
   {
      "Name":"Ziekenhuis Maas en Kempen (Maaseik)",
      "Phone":"",
      "Website":"http://www.zmk.be/",
      "Type":"General Hospital",
      "Address":"Belgium",
      "lat":"51.09573",
      "lon":"5.795289"
   }
]

But i still gives me an error.

DataTables warning: table id=TBresults - Requested unknown parameter 'Name' for row 0, column 0.

allan

You don't want to modify the source array of data, DataTables holds its own independent array, so you just want to pass in the new object: https://jsfiddle.net/b1ts3d9w/4/ .

That example still gives an error about the Address field, but that is because there is no Address field in the object.

Allan