Permanently reverse the order of a DataTable in jQuery?

Question

Let's say I have a Data Table like so:

<table id="history" class="display">
    <thead>
       
        <th>Player</th>
        <th>Word</th>
        <th>Value</th>
        <th>Message</th>

    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

I have a function that receives a payload from the server and adds a row to the datatable with the relevant information

     var history_data_table = $('#history').DataTable({
            "pageLength": 5,
            "searching": false,
            "bLengthChange": false,
            "language": {
                "emptyTable": "Words that you discover will appear here."
            }
        });


 function liveRecv(word_payload) {
            history_data_table.row.add([word_payload.id_in_group,
                word_payload.word,
                word_payload.word_value,
                word_payload.message]
            ).draw();

Naturally, this will add the row to the end of a paginated table. This table is a list of transactions in a game, and I want to present the most recent transactions to the user, such that every row that's added is added to the top of the data-table. What is the easiest way to achieve this?

Answer 1

You could try this method using jQuery

$('#history tr:first').after("<tr role="row"><td></td><td>add you own row</td></tr>");

or you could use DataTables inner function to access the array of rows

var history_data_table = $('#history').dataTable();
var DisplayMaster = history_data_table.fnSettings()['aiDisplayMaster'];
var tableapi = history_data_table.api();
var getlastrow = DisplayMaster.pop();
DisplayMaster.unshift(getlastrow);
tableapi.draw(false);