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

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

vadivelmurthy29vadivelmurthy29 Posts: 6Questions: 2Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • vadivelmurthy29vadivelmurthy29 Posts: 6Questions: 2Answers: 0
    edited January 2019

    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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • Bindrid2Bindrid2 Posts: 79Questions: 4Answers: 12

    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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

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

    Kevin

This discussion has been closed.