Alexander Craggs
Alexander Craggs

Reputation: 8789

How to add data into data tables

Let's start off by defining what I have. I have a remote JSON API, which I call to in order to get some data. I then run some simple functions on the data and end up with a row of data. This row of data is split into three variables. Date, name and message (imagine an IRC chat room). I wish to display this data in a data table so that it is searchable however, I am having trouble adding a row to a data table. At the moment, my HTML looks similar to this:

<table id="table" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Date</th>
                <th>Name</th>
                <th>Message</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Date</th>
                <th>Name</th>
                <th>Message</th>
            </tr>
        </tfoot>
    </table>

and my JS looks like:

    var text = document.getElementById('text'); //Text Div
    var nameguest = data.items[i].from; //Guests
    var nameuser = data.items[i].from.name; //Users
    var message = data.items[i].message; //Messages
    changeDate(data.items[i].date); //Date
    var table = document.getElementById("table"); //Table Div

    var row = table.insertRow(i);
    row.insertCell(0).innerHTML = datehuman;
    if (typeof nameguest == "object") {
        row.insertCell(1).innerHTML = nameuser;
    } else {
        row.insertCell(1).innerHTML = nameguest;
    }
    row.insertCell(2).innerHTML = message;
}
}

Is there some similar code to insertCell(0).innerHTML for datatables?

Upvotes: 0

Views: 854

Answers (2)

Ayan Pal
Ayan Pal

Reputation: 99

Add an extra "tbody" tag in your table's html. And you can use the following function to insert entries in the table.

function insertEntry (tableId, date, name, message) {

    var table = document.getElementById(tableId),
    tbody = table.getElementsByTagName("tbody")[0],
    tr = document.createElement("tr"),
    newDateEntry = document.createElement("td"),
    newNameEntry = document.createElement("td"),
    newMessageEntry = document.createElement("td");

    newDateEntry.innerHTML = date;
    newNameEntry.innerHTML = name;
    newMessageEntry.innerHTML = message;

    tr.appendChild(newDateEntry);
    tr.appendChild(newNameEntry);
    tr.appendChild(newMessageEntry);

    tbody.appendChild(tr);
}

Your HTML may look like following:

<table id="table" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Date</th>
            <th>Name</th>
            <th>Message</th>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <th>Date</th>
            <th>Name</th>
            <th>Message</th>
        </tr>
    </tfoot>
</table>

Your sample call to the function will look like:

insertEntry("table", "1/1/15", "Ayanonly1", "Hellow World");

Upvotes: 1

saikumar.tammisetty
saikumar.tammisetty

Reputation: 153

i added a tbody tag in the html provided by you as below

<table id="table" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Date</th>
            <th>Name</th>
            <th>Message</th>
        </tr>
    </thead>
<tbody></tbody>
    <tfoot>
        <tr>
            <th>Date</th>
            <th>Name</th>
            <th>Message</th>
        </tr>
    </tfoot>
</table>

and for adding the data to the table you can use append in jquery

var nameuser = data.items[i].from.name; //Users    
var message = data.items[i].message; //Messages
var newRowContent="<td>"+nameuser+"</td><td>"+message+"</td>  
       <td>"+changeDate(data.items[i].date)+"</td>"

$("#tblEntAttributes tbody").append(newRowContent);

from above code,i stored values in a variable and am appending that to the table tbody

for any more information about append please click here. i hope my answer is helpful.

Upvotes: 0

Related Questions