How can I add a row to a particular index?

rotaercz

I understand that the order of the rows are based on the internal sorting. I'm ok with it being sorted internally but visually when I add a row, how can I add a new row to a particular index until the user decides to do a column sort?

Basically I'd like to duplicate rows that the user clicked on. But since I have a default sort based on timestamp (descending) of when the row was created, whenever I add a duplicate row it goes to the very top.

How can I make it so when a duplicate row is created, it's added right above the original row?

PS Also, why does my emote look so angry? XD

Bindrid2

Instead of trying to control sorting when a new row is added, I jump to the page that has the new row ended up on. There is a handy plugin that can help you with that here https://datatables.net/plug-ins/api/row().show()

rotaercz

I actually tried that but when duplicating a row it was really confusing as to what was going on. The duplicated row really should be created right above the current row (basically where the original row is and every other row is pushed down). Due to sorting rows based on timestamp, newly duplicated rows will go to the top. This is really confusing for users. Ideally there should be no page change.

colin

Hi @rotaercz ,

How do you currently get your data? If you're getting your data from the DOM, you may be able to insert the duplicated row alongside the original, then call rows().invalidate() which would cause DataTables to re-read the DOM information.

Cheers,

Colin

Bindrid2

Why are you allowing duplicate rows?

rotaercz

@colin The inital rows are created server side via php. After that the user can create rows via ajax. I'll take a look at rows().invalidate(). I just need some general direction because I'm not familiar with how DataTables is designed.

I'm really liking DataTables though because it provides so much functionality right out of the box. The only downside in my opinion is that the file size is really large. I think the dev should remove backwards compatibility (but provide older versions for download) so it's a better experience for mobile devices.

@Bindrid2 After a duplicate row is created by the user, the user can click a section in the row to edit content. It's primarily used for adding a row with very similar data that needs a small change.

rotaercz

@colin I tried rows().invalidate() but no change in behavior. By default I'm sorting rows based on timestamp, so newly duplicated rows go to the top.

Would really appreciate some direction on what I should look into to have newly created rows ignore the sort and just get added right above the duplicated row (until the user decides to click a column title and sort the rows that is).

Bindrid2

If you use every single option available, you do end up with a very large file. In my project, I use a bundler to configure exactly what I need for the page I am on giving each page a semi customized build.

Bindrid2

why is it important to keep the rows together? I would do a popup pre populated with the data from the row being copied.
The user then edits the fields as desired, then clicks an add button to actually put it into the table. Then you can follow to the new row or stay with the old row as desired.

colin

From a usability perspective, I would definitely say @Bindrid2 last comment above should be considered. Is there a hard requirement on the duplication?

allan

Jumping back to this:

how can I add a new row to a particular index until the user decides to do a column sort?

The display order is 100% determined by the ordering applied to the table (i.e. the "sort"). Typically that is string or a number order, and if you want a specific row to appear in a specific place you need to add it in taking account of the ordering.

There is one other option which RowGroup makes use of - inserting the row dynamically on each draw - that makes it easy to insert a row at the end of the current page for example. But ordering / search isn't taken account of since that row isn't owned by the DataTable.

PS Also, why does my emote look so angry? XD

Hah! I think the forum software has been updated since you signed up last year to stop things like that happening. They are randomly generated. There is an upload option if you want to replace it.

I think the dev should remove backwards compatibility (but provide older versions for download) so it's a better experience for mobile devices.

Thanks for the feedback. The plan is to do exactly that for v2. The main file size will probably be larger than I'd really like still, but without dropping features, I don't think that can be addressed without a total rewrite, or using Closure compiler's advanced mode, and I know some folks are using the internal apis externally. It should come down by at least 10KiB though.

Allan

rotaercz

Is there a way to turn off the sort, add the corresponding row, then turn on the sort again?

I feel like a ton of people would use the functionality to be able to add a row to a specific index.

colin

There is with order(). You could get the current order, then disable ordering,

current = table.order();
table.order([]);

then add the row (row.add()), and reorder,

table.order(current).draw();

The only problem is that the row would be added at the end of the table - not at any specified position within,

Cheers,

Colin

rotaercz

@colin Oh, I see.

Hmm, is there a variable like a 2 dimensional array or something that I can just manually change to manage the rows under the hood? I don't mind getting my hands dirty.

colin

Hi @rotaercz ,

There kind of is, but it's deep in the code, and would have too many dependencies. Internally, indexes are stored for the row data to allow fast searching and ordering, changing one would break others, so not really an option I'm afraid,

Cheers,

Colin

rotaercz

@Bindrid2 @colin @allan

Hey, thank you, I really appreciate the help. All the details you guys gave me over the last few days really helped me understand DataTables better. It sounds like I'll have to work around my issue. I'm thinking I'll just make the timestamp the same for duplicates to keep them together since the timestamp data isn't really that important.

Also really looking forward to version 2. Would be really cool if you could select just the functionality you'll be using so the file size could be small as possible. Just throwing ideas out there.

Thanks again!