New added row should shown on the top of the table( first row ) in datatable

vadivelmurthy29

HI Team,
I got an requirement like , after adding the new row in the existing table ( jquery datatable). The newly added row or data show on the top of the table i.e. it should be visible at the first of the table.
It is possible to do so, please suggest me to develop this scenario.

Thanks in Advance
Vadivel

kthorngren

The inserted row placement is based on the ordering of the table. One option would be to use an index column (it would be the primary ordering column) that can manipulated to place the new row at the top. Another option is to use the Absolute Postion sorting plugin.

Kevin

colin

Hi @vadivelmurthy29 ,

By default, when a new row is added, it gets plumbed into the table and sorted by the current sorting priorities. If you wish to over-ride that, the absolute sorting plugin could be used. As the value that determines if it gets placed to the top if defined at the initialisation, you would need to have a hidden column, or some other values, that would ensure that row goes to the top.

Cheers,

Colin

vadivelmurthy29

Thanks @Colin, @Kthorngren for the prompt reply.

The absolute Position plug in which is used for the column which are already existing in the table, like the plug in will know the new added the data should come first. In my table i have Id which is primary key, so i am adding new data as per my process the table is ascending sorting so the newly added value will come at bottom of the table.

How to implement the absolute position to the newly added data, i.e. should come top of the table.

Example scenario.

i have 155 records, the table is sorted in ascending order 1,2,3..... 155.
now i added new record , the id will 156, now the table should show like 156,1,2,3....155, after some time if i added one more record the table should show 157,1,2,3....156 like this.

Can you please suggest for this kind of requirement.

Thanks in advance.
Vadivel

colin

Hi @vadivelmurthy29

Yep, the absolute plugin should do the trick for that - see here. Then you just need to erase the "XXX" from the previous row with cell().data() when adding the next.

Cheers,

Colin

Bindrid2

Ok, here is how I fixed the problem. I did it by using a custom sorting and the column render.

For the custom soring, I added this code before building my table.

    $.extend(jQuery.fn.dataTableExt.oSort, {
        "adds-first-pre": function (a) {
            console.log(arguments);
            if(a.indexOf("data-isadded='true'") > -1 ) return "";
            return a;
        },
    });

then for the first column I added the following rendering:

$("#example").DataTable({
    blah blah blah
        columnDefs: [{
            targets: [0], type: "adds-first", render: function (itemData, type, rowData, meta) {
                if(rowData.isAdded === true)
                    return "<span data-isadded='true'>" + itemData + "</span>";
                else {
                    return itemData;
                }
            }
        }],
blah blah blah});

isAdded is a flag I set in each added row when it is added by the user but before it is actually added to the table.

What do you think @colin , @kthorngren ?

Scott

colin

If it works, go for it It's a lot less code than the other options.

kthorngren

I like it. Very clever solution. Will point people to this thread when they ask the same thing.

Kevin