fnAddData which is a TR html string. Persist TR attributes on the new row.
fnAddData which is a TR html string. Persist TR attributes on the new row.
Hello,
I'm using fnAddData to add data to a datatable after initialization.
[code]
oTable.fnAddData $(data).children("td").map ->
$(this).html()
[/code]
The data object is an html string received through an ajax post request. The html string is actually a full table row, so in order to add it I need to get the TD's out of the string. Once I do that, I lose all info regarding the TR tag and apparently I have no way of setting the attributes on the newly created row.
Is there a way to do this through the API (like a fnAddData callback which yields a ref to the new row) or do I need to get the old TR attributes from the html string and then find the new row, and change them with something like $(new-row).data("myattr", myval) ?
If it's not possible, then this could be a nice new feature:
[code]
oTable.fnAddData data
[/code]
where data is a TR with attributes and data tags and lots of TD children. The TR attributes and data tags will persist when creating the new row through the datatables API.
EDIT:
Apparently there is a bigger issue. The TD elements will not persist their attributes as well. I managed to fix the TR with:
[code]
rowAttributes = $(data).data()
index = oTable.fnAddData $(data).children("td").map ->
$(this).html()
$(oTable.fnGetNodes(index)).data(rowAttributes)
[/code]
but the issue with the TD's is complicating things even more
EDIT 2:
Last update. Apparently the easiest way (that I found) to insert a TR with data attributes and TD children (with data attributes) is to destroy the datatable and re-initialize. Here's the code:
[code]
# Destroy the table
oTable.fnDestroy()
# Append new row as simple HTML
$("#my-table tbody").append($(data))
# Re-Initialize the table with the same initial options
oTable.dataTable
bPaginate: false
bLengthChange: false
aaSortingFixed: [[8,'asc']]
aoColumnDefs: [
bVisible: false
aTargets: [8]
]
[/code]
EDIT 3:
Turns out fnAddTr should do just what I need. Unfortunately it doesn't work with hidden columns so I adapted it slightly with this little piece of code:
[code]
...
nTr._DT_RowIndex = iIndex
$.each oSettings.aoColumns, (i, v) ->
nTr.removeChild(nTr.getElementsByTagName('td').item(i)) unless v.bVisible
...
[/code]
I'm using jQuery and coffeescript. Hope this is readable.
In the html I just used:
[code]
oTable.fnAddTr $(data).get(0)
[/code]
which is waaay better than what I was doing before.
Hope this helps someone else.
Thanks
I'm using fnAddData to add data to a datatable after initialization.
[code]
oTable.fnAddData $(data).children("td").map ->
$(this).html()
[/code]
The data object is an html string received through an ajax post request. The html string is actually a full table row, so in order to add it I need to get the TD's out of the string. Once I do that, I lose all info regarding the TR tag and apparently I have no way of setting the attributes on the newly created row.
Is there a way to do this through the API (like a fnAddData callback which yields a ref to the new row) or do I need to get the old TR attributes from the html string and then find the new row, and change them with something like $(new-row).data("myattr", myval) ?
If it's not possible, then this could be a nice new feature:
[code]
oTable.fnAddData data
[/code]
where data is a TR with attributes and data tags and lots of TD children. The TR attributes and data tags will persist when creating the new row through the datatables API.
EDIT:
Apparently there is a bigger issue. The TD elements will not persist their attributes as well. I managed to fix the TR with:
[code]
rowAttributes = $(data).data()
index = oTable.fnAddData $(data).children("td").map ->
$(this).html()
$(oTable.fnGetNodes(index)).data(rowAttributes)
[/code]
but the issue with the TD's is complicating things even more
EDIT 2:
Last update. Apparently the easiest way (that I found) to insert a TR with data attributes and TD children (with data attributes) is to destroy the datatable and re-initialize. Here's the code:
[code]
# Destroy the table
oTable.fnDestroy()
# Append new row as simple HTML
$("#my-table tbody").append($(data))
# Re-Initialize the table with the same initial options
oTable.dataTable
bPaginate: false
bLengthChange: false
aaSortingFixed: [[8,'asc']]
aoColumnDefs: [
bVisible: false
aTargets: [8]
]
[/code]
EDIT 3:
Turns out fnAddTr should do just what I need. Unfortunately it doesn't work with hidden columns so I adapted it slightly with this little piece of code:
[code]
...
nTr._DT_RowIndex = iIndex
$.each oSettings.aoColumns, (i, v) ->
nTr.removeChild(nTr.getElementsByTagName('td').item(i)) unless v.bVisible
...
[/code]
I'm using jQuery and coffeescript. Hope this is readable.
In the html I just used:
[code]
oTable.fnAddTr $(data).get(0)
[/code]
which is waaay better than what I was doing before.
Hope this helps someone else.
Thanks
This discussion has been closed.