How to add a row in an editable table and keep all the HTML attributes?

zax123

Hi all,

I have a DataTable created by converting an existing HTML table into a DataTable, as opposed to creating the DataTable then loading it server side. I did it this way because the table has tons of attributes I need to perform other JavaScript functions on it.

I have a way to add a row to the table by getting the HTML I need through AJAX and then adding the TR to the table. Before doing this, I do a DataTable.row.add().draw() with the data that should be in each TD. Then I replace the HTML that the .draw() function creates with HTML that has all the extra attributes I need since the .draw() function makes a very bare table. Everything looks good and the new row is editable, but when the inline edit is complete, the row returns to the form that the .draw() function creates and all my extra attributes are gone.

Can someone please help me with this? I've spent a few hours and can't figure it out? I basically need to do the same thing as I did to first convert the normal HTML table into a DataTable, but I only need to do it to the one new row.

Thanks!

Robert

allan

Hi Robert,

Are you able to give me a link to your page showing this problem please? It should be that Editor, when it updates an existing row, will just write into the cells, and leave the cell nodes themselves (and thus their attributes) alone.

Regards,
Allan

zax123

Hi allan,

Unfortunately, my site is using highly-sensitive legal data, so I can't open it up. I'm trying to think of a way to show you. I'm guessing, though, that any DataTable that is created by tagging existing HTML as opposed to being loaded server side and then has a row added to it would behave this way. As long as it is inline editable.

This is the code I'm using to add the new row:

                        values = { row_number, fee_earner, work_code, comment, entry_date, qty, unit_price };
                        $.ajax({
                            url: 'ajax/popups.php',
                            type: 'POST',
                            data: { action, case_id, values },
                            success: function(data) {
                                // Add html to the end of the right table
                                response = JSON.parse(data);
                                var table = $("table.dataTable[case_id=" + case_id + "]").DataTable();
                                table.row.add({
                                    "entry_date" : entry_date,
                                    "fee_earner" : fee_earner,
                                    "work_code_id" : work_code,
                                    "description" : $response["data"]["work_code_description"],
                                    "comment" : comment,
                                    "status" : "wip",
                                    "qty" : qty,
                                    "unit_price" : unit_price,
                                    "total" : unit_price * qty,
                                    "group" : "FIXME",
                                    "actions" : "FIXME"
                                }).draw();
                                $("table.wip_results[case_id='" + case_id + "'] tr:last").replaceWith(response["html"]);
                                $('#popup_add_line').dialog("close");
                            }    
                        });

allan

Thanks for your code - yes I think any table updated that would would suffer the same as you are replacing the element in the DOM, but DataTables doesn't know that this has been done.

What you can do is pass a tr node to row.add() so you can build the tr element to suit your needs then pass it into DataTables and it will read it in exactly the same way as it read the tr from the DOM on load.

For example:

table.row.add( $('<tr><td>1</td><td>2</td></tr>')[0] ).draw();

Obviously building the HTML would be a bit more complicated in your case (unless you can just use response.html since that appears to be there?), but that's the basic idea.

Allan

zax123

Allan,

You rock!!

That worked perfectly! Thank you so much!

zax123

Allan,

While I have your attention. :)

Is there a way to make DataTables aware of HTML changes in the data table? Similar to adding a line, but instead I want to change a line. I do it with Javascript by modifying the DOM, but datatables isn't aware of the change, so when I make an inline edit, it reverts to the status of the line BEFORE I used Javascript to change the DOM.

Thanks!

Robert

allan

Is there a way to make DataTables aware of HTML changes in the data table?

Yes, call the row().invalidate() method. That basically will cause DataTables to reread the HTML (it uses the same method internally to do this as it does for adding a new row).

So you can make the modifications you need directly to the HTML and then invalidate DataTables' cached data.

This only works for existing rows - adding and removing rows this way is not supported.

Allan

zax123

That also worked perfectly.

Thanks, Allan!!