Unable to Add row in the middle of a data table

tara_mb

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

allan

The position of the new row in the table is 100% determinate by the sort that is applied to the table. If you want to put a row in the middle of the table you need to make sure that the sorting will position it there.

Also, this FAQ is relevant: http://datatables.net/faqs#append

Allan

tara_mb

Hi Alan,
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

tara_mb

Hi Allan,
Can you please help me with the above issue.

Thanks in advance.

allan

Personally I'd be _very_ nervous about manipulating aiDisplayMaster etc externally, and I designed it... I would very strongly recommend that you do not do that unless you know the DataTables internals extremely well. For example you aren't adding the _DT_RowIndex property.

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

tara_mb

Hi 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.

Anirban_Sur

Hi Allan,

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

allan

> Considering that sorting is disabled, how can I add rows anywhere in the data table.

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

tara_mb

Hi 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.

allan

Use fnGetData to get the data for each row (or the _ method).

tara_mb

Hi Allan,

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

allan

`sort_index` in my above example is a column in the table (possibly a hidden one). So you would use `fnGetData( TRelement )[0]` to get the value.

> "bSort":false, // to disable user sorting

No - that disabled sorting full stop. As I mentioned you would use bSortable to disable user sorting.

Allan

tara_mb

Thanks a lot Allan, it worked:)