CODEWITHSUNDEEP
javascriptdatatables
Mojimi
Mojimi

Reputation: 3161

DataTables add object data that is not a column to row?

I can't figure this one out, their API is very confusing.

I have a table that displays tabular data of geometric features, so I want to have the coordinates saved in the row data.

And I need a way to retrieve this coordinates, for example, when a user clicks on the row.

Example of what I'm trying to achieve :

const dt = $('table').DataTable({
    columns : [
        {data : "NAME"},
        {data : "COLOR"}
    ]
})

dt.row.add({
    COLOR : "Red",
    NAME : "Point1",
    //Invalid parameter error
    geometry : {
        type : "point",
        coordinates : [1,1]
    }
})

I think it wouldn't be ideal storing in a hidden column, because the coordinates can get quite large for polygon types.

I'm very new to DataTables and am very confused with the API, any suggestion on how to better organize/execute my concept is more than welcome.

Upvotes: 0

Views: 61

Answers (2)

Apps-n-Add-Ons
Apps-n-Add-Ons

Reputation: 2146

HTML

<table>
  <thead>
    <tr>NAME</tr>
    <tr>COLOR</tr>
    <tr></tr>
  </thead>
</table>

JS

        const dt = $('table').DataTable({
        columns: [
            {data: null},
            {data: null},
            {data: null}
        ],
         // This makes the row clickable, where you can get data later
        "createdRow": function (row, data, dataIndex) {
            var tds = $(row).find("td");
            $.each(tds, function (key, value) {
                $(value).attr("onclick", "see_the_data(this)");
            }
        },
        // this hides the coordinate column from view
        "columnDefs": [
                {
                    "targets": 2,
                    "visible": false
                }
         ]
    });

    dt.row.add({
        COLOR: "Red",
        NAME: "Point1",
        //Invalid parameter error
        geometry: {
            type: "point",
            coordinates: [1, 1]
        }
    });

    function see_the_data(e) {
        console.log("the data is ", e);  // you can then go further as you need
    }

Upvotes: 1

K Thorngren
K Thorngren

Reputation: 548

Seems like what you have should work. I put together a little example for you: http://live.datatables.net/rikofefu/1/edit

It adds a row with the extra geometry object. Select the row then click the Show selected data button. The console will display the full row and just the geometry object.

I'm using the Select extension to get the selected row.

Upvotes: 1

Related Questions