Add row with row().data() and receiving

ckiii

I am new to DataTables and having some difficulty here.

When trying to add a row it does not handle the objects properly. In the dtable.row.add() I have the first object returning as [object HTMLTableCellElement] and the rest are filling the innerHTML properly. Problem is I need it to pass all info in the object so the classes take effect, as well as plaving all the innerHTML. My TR needs to have 3 classes(gradeA mainRow edited) and each TD (center) Can someone tell me what I am missing?

    var dtable = $('#ledgerentrytable').DataTable();
    dtable.destroy();

    var table = document.getElementById("ledgerentrytable");
    var rowCount = table.rows.length;

    var rowMain = table.insertRow(-1);
    $(rowMain).addClass("gradeA mainRow edited");

    var cell1 = rowMain.insertCell(0);
    var cell2 = rowMain.insertCell(1);
    var cell3 = rowMain.insertCell(2);
    var cell4 = rowMain.insertCell(3);
    var cell5 = rowMain.insertCell(4);
    var cell6 = rowMain.insertCell(5);
    var cell7 = rowMain.insertCell(6);
    var cell8 = rowMain.insertCell(7);

    $(cell1).addClass("center");
    $(cell2).addClass("center");
    $(cell3).addClass("center");
    $(cell4).addClass("center");
    $(cell5).addClass("center");
    $(cell6).addClass("center");
    $(cell7).addClass("center");
    $(cell8).addClass("center");

    cell1.innerHTML = "<input type='text' class='validate[custom[onlyValidDate]], studfindisbursedate dateFormat hasDatepicker text' style='min-width:80px!important;' value='02/26/2018' id='dp1521062680108'>"; // Need to insert the VALUE and an ID
    cell2.innerHTML = "<input type='text' class='validate[custom[onlyValidDate]], studfinpostdate dateFormat hasDatepicker' style='min-width:80px!important;' value='02/26/2018' id='dp1521062680109'>"; // Need to insert the VALUE and an ID
    cell3.innerHTML = "<input type='text' class='amountValid' style='width:80px!important;' value='200.00'>"; 
    cell4.innerHTML = "<input type='text' style='width:80px!important;' value='191'>";
    cell5.innerHTML = "<div class='selector' id='uniform-selectProgramCode' title=''><span>PL</span><select class='styled selProgramCode' id='selectProgramCode' style='opacity: 0;'><option value=''>-</option><option value='1'>Agencies</option><option value='8'>Grants</option><option value='9'>IFP</option><option value='10'>Inst Scholarship</option><option value='11'>IoIFP</option><option value='12'>LG Grant</option><option value='13'>LG Scholarship</option><option value='16'>PL</option><option value='19'>S Grant</option><option value='20'>S Scholarship</option><option value='21'>Scholarships</option><option value='22'>SEOG MATCH</option><option value='23'>VEB</option></select>";
    cell6.innerHTML = "<div class='selector' id='uniform-selectTrackingCode' title=''><span>Student Overage</span><select class='styled selTrackingCode' id='selectTrackingCode' style='opacity: 0;'><option value='1'>Enrollment Fee</option><option value='4'>Monthly Drawing</option><option value='2'>Over Contract Fee</option><option value='3'>Student Overage</option><option selected='selected' value='0'>-</option></select></div>";
    cell7.innerHTML = "<div class='selector' id='uniform-selectTypeCode' title=''><span>DISB</span><select class='styled selTypeCode' id='selectTypeCode' style='opacity: 0;'><option value=''>-</option><option value='0'>ADJB</option><option value='1'>CASH</option><option value='2'>CARD</option><option value='3'>CNCL</option><option value='4'>DISB</option><option value='5'>MISC</option><option value='6'>REFD</option><option value='7'>WOFF</option></select></div>";
    cell8.innerHTML = "";
    
    dtable.row.add([ cell1, cell2.innerHTML, cell3.innerHTML, cell4.innerHTML, cell5.innerHTML, cell6.innerHTML, cell7.innerHTML, cell8.innerHTML, "", ""]).draw()

allan

All of your other ones are using .innerHTML apart from your first one - that would explain the error.

Allan

ckiii

Hi Allan,

I understand that. I was kinda showing that I can only see data if it is assigned via .innerHTML. I can populate the tds but it is stripping all classnames and accompanying properties from them.

How can I send the data for the row's classname and the cells' classnames?

allan

Ah I see what you mean. If you want to insert a DOM node, you need to construct the full tr. If you pass a tr element to row.add() it will read and use the nodes, but there isn't any option to pass in individual td element I'm afraid.

Allan

ckiii

I feel like you mean that I need to setup the nodes in the

var dtable = $('#ledgerentrytable').DataTable()

but am unclear exactly how to do it. I believe it would be

var dtable = $('#ledgerentrytable').DataTable({
"rows" = [
"class" : "gradeA mainRow edited"],
"columns" = [
"class" : "center",
"class" : "center",
"class" : "center",
"class" : "center",
"class" : "center",
"class" : "center",
"class" : "center",
"class" : "center"]})

But this isnt working

When looking at this example

var table = $('#example').DataTable();
 
var rowNode = table
    .row.add( [ 'Fiona White', 32, 'Edinburgh' ] )
    .draw()
    .node();
 
$( rowNode )
    .css( 'color', 'red' )
    .animate( { color: 'black' } );

it shows only applying a row, no column properties and no example of actually adding classes. Also there's no destroy, when does that come in to play? I thought we had to destroy it right away it add to it.

When I add node() to my draw() I get an error stating that dtable.draw().node is NOT a function.

    dtable.row.add([cell1.innerHTML, cell2.innerHTML, cell3.innerHTML, cell4.innerHTML, cell5.innerHTML, cell6.innerHTML, cell7.innerHTML, cell8.innerHTML])

    dtable.draw().node();

ckiii

Ok So I have worked out that in order to add className to row I use this

    var rowNode = dtable
        .row.add([cell1.innerHTML, cell2.innerHTML, cell3.innerHTML, cell4.innerHTML, cell5.innerHTML, cell6.innerHTML, cell7.innerHTML, cell8.innerHTML])
        .draw()
        .node();

    $(rowNode).addClass("gradeA mainRow edited");

But what about the TD? How do I add the className to that?

I tried adding

    $(cell1).addClass("center");
    $(cell2).addClass("center");
    $(cell3).addClass("center");
    $(cell4).addClass("center");
    $(cell5).addClass("center");
    $(cell6).addClass("center");
    $(cell7).addClass("center");
    $(cell8).addClass("center");

but that did not work. Do I have to re-declare the table and walk through that process a second time?

ckiii

I was able to resolve with this

    var rowNode = dtable
        .row.add([cell1.innerHTML, cell2.innerHTML, cell3.innerHTML, cell4.innerHTML, cell5.innerHTML, cell6.innerHTML, cell7.innerHTML, cell8.innerHTML])
        .draw()
        .node();

    $(rowNode).addClass("gradeA mainRow edited");

    $(rowNode).children(cell1).addClass("center");
    $(rowNode).children(cell2).addClass("center");
    $(rowNode).children(cell3).addClass("center");
    $(rowNode).children(cell4).addClass("center");
    $(rowNode).children(cell5).addClass("center");
    $(rowNode).children(cell6).addClass("center");
    $(rowNode).children(cell7).addClass("center");
    $(rowNode).children(cell8).addClass("center");

allan

Yup - that would work. Although I was actually meaning that you should do something like:

var row = document.createElement('tr');
row.appendChild( cell1 );
row.appendChild( cell2 );
...

dtable.row.add( row ).draw();

Allan