Unable to Add row in the middle of a data table
Unable to Add row in the middle of a data table
tara_mb
Posts: 8Questions: 0Answers: 0
Hi,
I have a requirement to dynamically add a row at any given position to the data table .
I learnt that there is no API in Data table to achieve this.
Hence, used DOM to add a row, but the problem is that Data table does not recognize the added row.
On traversing to the next page and coming back to the DOM manipulated page,
the added row disappears. In other words on fnDraw() call , the DOM added row vanishes.
Please let me know how to overcome this problem in data table.
Thanks In Advance.
Regards,
Tara
I have a requirement to dynamically add a row at any given position to the data table .
I learnt that there is no API in Data table to achieve this.
Hence, used DOM to add a row, but the problem is that Data table does not recognize the added row.
On traversing to the next page and coming back to the DOM manipulated page,
the added row disappears. In other words on fnDraw() call , the DOM added row vanishes.
Please let me know how to overcome this problem in data table.
Thanks In Advance.
Regards,
Tara
This discussion has been closed.
Replies
Also, this FAQ is relevant: http://datatables.net/faqs#append
Allan
Thanks for the quick response.
I did refer to the FAQ but dont quite understand what should be set if the position chnages dynamically.
I also found another approach of manipulating OSettings-aiDisplay,aiDisplayMaster and aoData to achieve addition of rows at the required location.
Please find below my code.
oTable = $("#sellIn").dataTable();
var oSettings = oTable.fnSettings();
var oData = $('#sellIn').dataTable().fnSettings().aoData;
var oDisplayMaster = $('#sellIn').dataTable().fnSettings().aiDisplayMaster;
var oDisplay =$('#sellIn').dataTable().fnSettings().aiDisplayMaster;
var affectedRowNbr = childTd.parentNode.parentNode.rowIndex-1;
var ind = affectedRowNbr+1;
var aData = oData[affectedRowNbr]._aData;
var displayData = [aData[0], aData[1],aData[2], aData[3],aData[4]];
var newRow = {
_aData : displayData,
_anHidden: oData[affectedRowNbr]._anHidden,
_sRowStripe: oData[affectedRowNbr]._sRowStripe,
nTr: oData[affectedRowNbr].nTr
};
//insert the new element
oDisplayMaster.splice(ind, 0, ind);
// oDisplay.splice(ind, 0, ind);
oData.splice(ind, 0, newRow);
//update references
var i = 0;
for (i = ind+1; i
Can you please help me with the above issue.
Thanks in advance.
That's not to say it can't be done this way, but given that you are manipulating the private parameters of DataTables, there is a significant chance that any change in how DataTables works will cause this to break.
So having said that, the way I would approach it myself is to manipulate the sorting that is applied to the data (or rather manipulate the data for the sort!), such that the row you insert will appear in the middle of the table. I presume you've disabled sorting btw? Otherwise, how does this interact with when the user sorts the table?
Allan
Ok understood that it is not safe to manipulate the internals of data table.
Going by your other approach, I dont quite get it.
Considering that sorting is disabled, how can I add rows anywhere in the data table.
My requirement is , I have a button as a row element in the data table, and on click of the button, dynamically a row should get added just below that.
Please let me know how I can achieve this?
An example would be appreciated.
Thanks & Regards,
Tara.
I am also facing the similar kind of issue. But in my case i want to add the row after the index of the current row. Say for example , i select a row and the JQuery will invoke the click function to add a row after that row.
In DOM model it works well using TR or TD and getting the 'this' reference i can add a row using using $(this).after(<--- HTML row elements>) . But if i am getting a JSON object how do i add a row in a similar fashion.
fnAddData adds data to either the top or bottom, but i want to have a method which can just do the same work when i provide a index after which it should add.
Kindly help in this regard.
I can acheive this for DOM model using APPEND, after etc but not for models which get data from JSON etc.
I want to add a new row after the selected row and then retain it so that the Save button in the application can update that record in the DB.
Regards, Anirban_Sur
Okay - so the way I would do it myself is to enable sorting, but disable user sorting (i.e. bSortable ) and use the aaSortingFixed to force sorting to always occur on a hidden column - which will be your index column. Then when you insert your new row, read the sort index for the row you want to insert the new row after, and set the sort index for the new row to be one higher. Thus it will be inserted into the correct place :-). You will also need to loop over all rows, and increment the sort index for existing rows which are higher than the insert point, so the existing index is retained.
For example
[code]
sort_index | col1 | col2 | ...
0 | cell11 | cell12 | ...
1 | cell21 | cell22 | ...
2 | cell31 | cell32 | ...
3 | cell41 | cell42 | ...
sort_index | col1 | col2 | ...
0 | cell11 | cell12 | ...
1 | cell21 | cell22 | ...
2 | new1 | new2 | ... <-- new row
3 | cell31 | cell32 | ... <-- index incremented
4 | cell41 | cell42 | ... <-- index incremented
[/code]
@ Anirban_Sur You need to use the DataTable API, not the DOM/jQuery APIs - otherwise DataTables doesn't know you've changed something. Please see my above answer as I think that relates to your issue - if it doesn't help, please open a new thread so we can keep this one on a single issue and get that resolved without this thread hosting multiple conversations.
Allan
Thanks for the quick reply.
I got the logic. But I dont find any API to retrieve the sort index of the row.
Can you please help me understand about this.
Regards,
Tara.
As per my understanding fnGetData takes an position or a node as a parameter returns the corresponding row data. But how to get the sort index of the fetched row.
Also this is how my data table initialisation looks.
$("#sellIn").dataTable({
"sPaginationType": "full_numbers",
"bPaginate": true,
"bJQueryUI": true,
"bAutoWidth": true,
"bFilter": false,
"bSort":false, // to disable user sorting
"aaSorting": [[0,'asc']],
"aaSortingFixed":[ [0,'asc']] // to force sorting for first column
);
Sorry for my ignorance as I am new to Jquery and data table.
-Tara
> "bSort":false, // to disable user sorting
No - that disabled sorting full stop. As I mentioned you would use bSortable to disable user sorting.
Allan