Reputation: 8789
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
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
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