Insert new row at top?

jimboy

Hi,

How to insert new row at top? I get error below "DataTables warning: table id=datatable - Requested unknown parameter '1' for row 3, column 1".

Table

                        <table id="datatable">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Id</th>
                                    <th>Name</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                    <tr>
                                        <th><span><i>edit 2</i></span></th>
                                        <td>2</td>
                                        <td>Jonathan Slick</td>
                                        <td>Aug 24 2017</td>
                                    </tr>
                                    <tr>
                                        <th><span><i>edit 1</i></span></th>
                                        <td>1</td>
                                        <td>Sandra Bullock</td>
                                        <td>Aug 23 2017</td>
                                    </tr>
                              </tbody>
                        </table>

jQuery

                                var table = $('#datatable').dataTable(); 
                                var dt = table.api()
                                var obj = { "": "<span><i>edit 3</i></span>", "Id": 3, "Name": "William Mac", "Date": "Aug 25 2017"  }
                                dt.row.add(obj);
                                var aiDisplayMaster = table.fnSettings()["aiDisplayMaster"];
                                irow = aiDisplayMaster.pop();
                                aiDisplayMaster.unshift(irow);
                                dt.draw();

Thanks,

bindrid

you really cant. As soon as you add the row and apply the draw, the table is automatically resorted so there is no telling where it might end up.

my answer to this problem was to set the page where the new row ended up as the current page

jimboy

Hi Bindrid,

Below inserts to table, and I think to put the new row at top is set the default sorting at initialization.

var table = $('#datatable').dataTable(order: [[1, "desc"]]);

                                table.fnAddData([
                                    "<span><i>edit 3</i></span>",
                                    3,
                                    William Mac,
                                    Aug 25 2017]
                                ); 

So far it works! I can do sorting, paging and searching after insert.

If there is a reliable way, let me know. Thanks!

allan

The ordering of the data in the table is entirely determined by the ordering applied to table. If your new row will be sorted to the top of the table, then it will be shown at the top. Equally, if is data and the current sorting condition means that it should be shown part way through the table, then it will be.

Allan

singhswat

Has anyone found any solution to this problem?

kthorngren

Maybe this blog will help:
https://datatables.net/blog/2016-12-22

Kevin

Suhani123

The ordering of the data in the table is entirely determined by the ordering applied to table. If your new row will be sorted to the top of the table, then it will be shown at the top. Equally, if is data and the current sorting condition means that it should be shown part way through the table, then it will be.

Allan

Question based on this:
What if I want no ordering/sorting and want the new entry to display as a top row.

kthorngren

This is true however the blog I linked to above uses a plugin to allow for defining data to sort to the top or bottom of the table.

Kevin