jQuery DataTables add rows dynamically removes some initialization

Question

I have successfully worked with jQuery DataTables and they look and function great. But I'm switching to adding rows dynamically and some of the formatting disappears when the rows are added.

1.The background colors of the columns disappear 2. the selected clumn background color disappears as well 3. and if you click on the column headers it kills all the rows and resets the DataTable to its initial state with all the background colors and select column background back as they should be.

This is how the table is initialized"

oTable = $('.utable').dataTable( {"sDom": 'rt',"sScrollY":"260px", "bPaginate":false, "bFilter":false, "bInfo": false});

Here is how I add the new rows:

document.getElementById('tbdy').innerHTML="<tr id='zrow16' class='gradeX'><td id='d1'>None</td><td id='d5' class='ralign'>None</td><td id='d6' class='ralign'>None</td></tr>";...<tr id='zrow17' class='gradeX'><td.... "

we need more code, the one you posted is certainly not enough to figure out a solution. — Th0rndike
– Th0rndike, Commented Mar 21, 2012 at 13:27
Thank you I believe that you are right! But I need a checkbox also in the Row and I don't know how to do that. — DKean
– DKean, Commented Mar 21, 2012 at 13:42

Nicola Peluchetti · Accepted Answer · 2012-03-21 13:45:51Z

6

To add row you should use fnAddData(), you shouldn't append a <tr> otherwise you break the table

var giCount = 2;
function fnClickAddRow() {
  oTable.fnAddData( [
    giCount+".1",
    giCount+".2",
    giCount+".3",
    giCount+".4",
   '<input type="checkbox">']
  );

  giCount++;
}

edited Mar 21, 2012 at 13:45

answered Mar 21, 2012 at 13:34

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DKean Over a year ago

The problem is that I need to insert a checkbox and I'm not sure how to do that with fnAddData()

Nicola Peluchetti Over a year ago

@DennisKean you can insert also some html in your row

Nicola Peluchetti Over a year ago

@DennisKean i updated my answer, also look here live.datatables.net/oputug/edit#javascript,html (justclick thetable to add a row)

DKean Over a year ago

Could you show me a simple example on how to do that? Never mind... you anticipated me... you rock...

Nicola Peluchetti Over a year ago

@DennisKean i updated my answer and provided a link that does justthat! :)

Collectives™ on Stack Overflow

jQuery DataTables add rows dynamically removes some initialization

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related