Can you provide some sample code.

domingo.garcia@rdsgi.com

Hi, I'm trying to to present a table with initial data loaded as objects to a JS array. The I want to redraw the table after adding or changing a row on the array. Here is my code:

HTML

<div class="xflddisplay">
      <table id="myTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Product#</th>
                <th>Description</th>
                <th>Sobra</th>
                <th>Stale</th>
            </tr>
        </thead>
        <tbody id="reclines"> 
        </tbody>
    </table>
</div>

JAVASCRIPT

var trans = []; // global var

$(function () {
.
.
.
var mytab = $('#myTable').DataTable( {
data: trans,
paging: false,
ordering: false,
searching: false,
"columns": [
{"data": "prodno", "width": "20%"},
{"data": "description", "width": "50%"},
{"data": "rqty", "width": "15%"},
{"data": "sqty", "width": "15%"}
]
});
.
.
function loadArray(data){
var truck = $('#txttruck').val();
var tdate = tyy + '-' + tmm + '-' + tdd;
var newtran = [];
trans.length = 0;
for(var i=0; i<data.length; i++) {
if (data[i].doc.truck == truck &&
data[i].doc.trndate == tdate &&
data[i].doc.status == "N") {
newtran = {
prodno: data[i].doc.product,
description: data[i].doc.proddesc,
rqty: data[i].doc.rqty,
sqty: data[i].doc.sqty
};
trans.push(newtran);
}
}
if (trans.length > 0) {
loadTable();
}
}

function loadTable(){
    console.log("loadTable");
    mytab.draw();
    document.getElementById("foottext").innerHTML =
            "Total: Sobra: "+ trqty + ",  Stale: " + tsqty;
}

kthorngren

To add rows you will want to build an array of objects then use rows.add() to add the array of objects to the table. Make sure to chain draw() to redraw the updated table.

To modify row contents you can use row().data() to get the data and to update the row data.

Kevin