Add as first row, and delete last row

mrmcduck

I have a table that shows certain events live, ordered by timestamp descending. I initialize the table per JS object array (already sorted).

The the table is updated by AJAX. Since I enabled sorting on the datatable it works to add a new row (by using table.row.add(dataObject); ), but i also only want to display a certain amount of rows. Like when its more than 100, it shall the delete the row with the oldest timestamp.

And this is where my problem starts, the datatable sorting does not change the order of the data array, new rows are added to the end, so when i use table.row(99).remove(); it actually deletes the last inserted row.

I thought about disabling the datatable order functionality, but as far as i understood i cannot add new rows as the first row either.

Is my only solution to keep track of the data array and do all the sorting, inserting and deleting manually and then assign the data array again to the datatable? This seems like extremly bad for performance, since there can be multiple updates per second.

Did i get something wrong, or are there no other solutions? And if no, can anybody tell me about the performance impact this would have?

kthorngren

I wrote a log display like you describe using Datatables. It seems to work well but I only need to keep 200 rows in the display. I wrote it when I was first learning Javascript and Datatables - probably not the best project to start with

Keeping the table to a certain number of records is straightforward. I pulled snippets from my code to give you an example:
http://live.datatables.net/tapawuca/2/edit

In the example I have a function addRow() which simply adds rows (4 at a time) from an array at 1 second intervals. It then calls the function trimLog() which is what you will be interested in.

Basically if the number of rows in the table is greater than the number defined then trimLog() will remove the oldest (top) rows from the table. It does this by getting an array of all the row indexes. It keeps the leftmost (top rows) indexes of the number of rows to remove. For example if there are 52 rows of a 50 row table is will get the left 2 indexes. Then it will delete the rows with those indexes and redraw the table. You should never see the table info display show 52 rows just 50 even though adding will go to 52 for a split second.

The difficult part is keeping the table at the position you want when updating the table. I looked at the Scroller extension but it didn't fit my needs although it may work for you. It has row().scrollTo() which could help you keep the table in the position desired.

The below I wrote for my log display but they aren't in the above example. Just giving you ideas of what you might want to do.

I wrote my own somewhat complicated (at least for me) code to keep track of where the user is in the table (top, middle or bottom). In my case I want to display the bottom (newest) rows unless the user is in the middle or top which I then need to keep the table at the spot the user is looking at. This code can probably use a re-write now that I know a bit more about Javascripting.

I also added checkboxes to filter the severity (debug, error, info, etc) displayed in the table. This was accomplished with a search plug-in.

Kevin

mrmcduck

Wow. Just wow. I'm am truly amazed by the detail of your answer. Thank you very much. This solved the problem I described. I wonder why I haven't thought about just slicing out the first row since i know that the newly added rows get to the back of the array.

The scrolling isn't an issue for me, it works fine with scrollY.

Though it solves my problem described, it does not solve another issue with a different table and the similar base problem:

It is a table with user submitted numbers, it's datatables-ordered by these numbers.
1) After it's sorted, can I get the data row that is at a certain index? (Random order at initialization, I want datatables to order my data, and then access (the ordered!) rows by its index.)
2) Addition to 1): Can I remove that row from the dataset without iterating over the whole array and doing a manual search and remove?

kthorngren

You can use the row-selector as a function to determine the rows to delete. For example:

table
    .rows( function ( idx, data, node ) {
        return data[0] === 3;
    } )
    .remove()
    .draw();

Essentially deletes all rows with value of 3 in column 0.

Kevin

mrmcduck

That's something, but is there an easy way to access the data of the first row after the datatable ordering has been done?

kthorngren

You can use a jQuery selector like :first to get the first row in the table, for example:

table.row(':first')
        .data();

Kevin

mrmcduck

And you saved me again. Honestly I cannot express how grateful I am for your help