Add a new row, then skip to it!

jantin

Hello,

I've been searching the forums in vain for the answer to this question, so I thought I'd just go the direct route:

I have a large paginated table to which the user can add rows via fnAddData. Works great. However, after the row is added to the table, I would like the view to skip to that row, wherever it turns out to be in the table based on the current sort, pagination, etc.

I've found the fnDisplayStart plugin (http://datatables.net/plug-ins/api#fnDisplayStart) which will nicely allow me to skip to the correct point, if only I knew the appropriate index. I know that fnAddData returns the index of the new row in aoData, but it appears that index is just a sequential count --- it gets one bigger each time I add a new row, so passing it will always skip to the very end of the table. I need to know the correct index after the sort. How can I get the appropriate value to pass to fnDisplayStart?

Any thoughts?

Many thanks!!

--Judd

allan

Hi Judd,

I think the fnDisplayRow plug-in will help nicely here. This takes a TR parameter, so you need to convert the aoData index return from fnAddData into the TR that you want. So you could do something like:

[code]
var oSettings = oTable.fnSettings();
var aiAdded = oTable.fnAddData(...);
oTable.fnDisplayStart( oSettings.aoData[ aiAdded[0] ].nTr );
[/code]
and hopefully that will do it for you. You could integrate this into fnDisplayStart as well if you preferred.

Regards,
Allan

jantin

Allan,

That's fantastic, and it works like a charm. Just for the clarity of potential future visitors, the correct pseudocode is:

[code]
var oSettings = oTable.fnSettings();
var aiAdded = oTable.fnAddData(...);
oTable.fnDisplayRow( oSettings.aoData[ aiAdded[0] ].nTr );
[/code]

(You just accidentally called fnDisplayStart instead of fnDisplayRow in the last line...)

I'm trying to think of the easiest way to integrate this into Datatables, since it seems like the sort of thing anyone might want to do when dynamically adding rows to a large, sorted, and/or paginated table. It could be an additional boolean option to the fnAddData method, but it would be hard to interpret when adding multiple rows if they end up sprinkled throughout the table after the sort. Perhaps that's why it's not there to begin with. :)

Again, thanks for your help, and for your generosity with all this!

--Judd

allan

Hi Judd,

Oops - a slip of the copy and paste :-). Thanks for putting in the correction.

I agree that this is a fairly handy little function in and of itself, so what I think I'll do is wrap it up into it's own little plug-in. Probably not something that warrants inclusion in the main distribution, but very handy as a plug-in. I'll post the link in this thread when I've done that.

Regards,
Allan

allan

Hi Judd,

Here is the plug-in: http://datatables.net/plug-ins/api#fnAddDataAndDisplay . A touch more tricky than the three liner above, but not to bad, and doesn't depend on any other plug-ins.

Regards,
Allan

jantin

Allan,

Great stuff! Works very well. I thought I'd add one other bit of information for future forum searchers. When I'm adding a new row to the current page, for example, but at a position that is scrolled out the bottom of the window (because the table is large...), I want the view to jump or scroll to where the new row has appeared. To make this work, I used the excellent scrollTo plugin: http://plugins.jquery.com/project/ScrollTo

So, in the function that handles the row addition, I have something like the following:

[code]
oTable = $('#example').dataTable();
oTable.fnAddDataAndDisplay( [ 1, 2, 3, 4, 5 /* ... */ ] );
$.scrollTo(row.nTr, 800);
[/code]

Of course, I also had to include the scrollTo js file to make this work. There may very well be a way to do this without a plugin, but this easy, and scrollTo can take options for easing and such to make it quite elegant.

Thanks again!

--Judd