How to place new rows on top when using an empty table at initialisation?

richard.carree.com@gmail.com

According to this answer the sorting is not applied when adding new rows if there is no data in the table when it is initialised.

My table is empty at initialisation:

    <table id="table" class="table>
        <thead>
        <tr>
            <th scope="col">UUID</th>
            <th scope="col">Date</th>
            <th scope="col">Name</th>
        </tr>
        </thead>
    </table>

I'm currently using a function that uses row().add() to add a new row from an event:

    addRow(table, row) {
        let rowNode = table
            .row.add( [
                row.uuid,
                row.date,
                row.name,
            ] ).draw(false).node()
        ;
    }

This adds a new row at the bottom, even though I set order: [[0, "desc"]] or if I add table.order([0, 'desc']).draw(); after row().add().

I found this post but it seems deprecated and I'm not sure if it can work in this specific case.

How to add a new row at the top when using an empty table at initialisation? In case of sorting, just in case, I mention that I consider to hide the column the sorting is applied on (here uuid).

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

The best place to start is with a test case showing the problem you are having. I built this test case, based on your code snippets, to show sorting works properly when starting with an empty table:
http://live.datatables.net/zecesipa/1/edit

According to this answer the sorting is not applied when adding new rows if there is no data in the table when it is initialised.

That thread is specifically referring to using HTML5 data attributes for sorting which is doesn't appear you are doing.

How to add a new row at the top when using an empty table at initialisation? In case of sorting, just in case, I mention that I consider to hide the column the sorting is applied on (here uuid).

If the next UUID is a higher value than all the previous it should be placed in order. Please update the test case to show your specific data so we can see what is happening. You can hide this column and still have it sorted.

Kevin

richard.carree.com@gmail.com

Sorry guys, I believed the piece of code could be enough and I was wrong.

I created a test case, it seems it's because I used ordering to false since I wanted to disable the ability for the users to sort columns by click.

Is it possible to disable this ability while sorting a column?

kthorngren

The ordering docs state this:

when disabled, there are no sorting actions applied by DataTables at all.

As mentioned in the docs you can use columns.orderable to turn of ordering for one or more columns. The columns.orderable state this:

Developers are still able to order a column using the order option or the order() method if required.

Use columns.orderable for each column to allow the table to be sorted.

Kevin

colin

Yep, Kevin's answered the question, but I noticed you're using Editor too in your script. Is that just cut&paste from a test case you found, or are you genuinely using it?

If you are using Editor, then row.add() will only add the row locally, and it won't be sent back to the server. For that, you need to use create() and submit(),

Colin

richard.carree.com@gmail.com

Yes I use Editor but I don't need to update the server since I use WebSockets.
Thanks colin for the detail.