Add Empty Row(For Insert) in jquery Datatable (Not Editor) in bottom after data

Question

my question is not how to put the empty row its why the empty row appear as first row

   function BindCenterTable(ID,val) {
        var strSearchLang = " ";
        txtCenetrTotal.value = val;
        if (lang == 'en-US') {
            strSearchLang = "  Search   ";
        }
        $.ajax({
            type: "Post",
            url: 'Query.asmx/FillSubTransCenters',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: '{SubTransID: ' + ID + '}',


            success: function (data) {
                if (typeof CenterTable != 'undefined')
                    CenterTable.destroy();
                CenterTable = $('#tableCenters').DataTable({
                    "aaData": JSON.parse(data.d),
                    "bFilter": true,
                    "bInfo": false,
                    "lengthChange": false,
                    "oLanguage": {
                        "sSearch": strSearchLang
                    },
                    "paging": false,
                    "columns": [
                    { "data": "id" }, { "data": "Center_No" },
                    { "data": "CenterName" }, { "data": "Value" },
                    { "data": "Val_Percent" }
                    ],
                    "columnDefs": [
         {
             "targets": [0],
             "visible": false,
             "searchable": false
         }, {
             "targets": 5,
             "data": null,
             "defaultContent":
              ' <button class="btn btnEdit" type="button"> <i class="fa fa-pencil " style="font-size:20px"></i> </button> <button class="btn btnDelete" type="button"> <i class="fa fa-trash " style="font-size:20px"></i> </button>'

         }
                    ],

                });
                AddCenterEmptyRow();
            },
            error: function (err) {
                // alert(err);
            }
        })
    }



 function AddCenterEmptyRow() {
        var rowNode = CenterTable.row.add({
            "id": "0", "Center_No": "0", "CenterName": "0",
            "Value": "0", "Val_Percent": "0"
        }).draw().node();
        if (rowNode) {
            var jqTds = $('>td', rowNode);
            jqTds[0].innerHTML = '<table style="width:100%"><tr><td><input type="button" id="btnNewCenter"   value="..." ></td><td><input type="text" class="twitterStyleTextbox" style="width:60px" id="txtNewCenter_No" readonly ></td></tr></table>';
            jqTds[1].innerHTML = '<input type="text" class="twitterStyleTextbox" readonly id="txtNewCenterName" >';
            jqTds[2].innerHTML = '<input type="number" style="width:60px" id="txtNewCenterVal" class="twitterStyleTextbox">';
            jqTds[3].innerHTML = '<input type="number" style="width:60px" id="txtNewCenterPerc" class="twitterStyleTextbox">';
            jqTds[4].innerHTML = '<button class="btn btnSubNewCenterSave" type="button"> <i class="fa fa-save " style="font-size:20px"></i> </button> '
        }
        var e = document.getElementById('txtNewCenterVal');
        e.oninput = CenterValChange;
        e.onpropertychange = e.oninput; // for IE8
        var e = document.getElementById('txtNewCenterPerc');
        e.oninput = CenterPercChange;
        e.onpropertychange = e.oninput; // for IE8
        //var e = document.getElementById('txtNewEchange_Rate');
        //e.oninput = DebitChange;
        //e.onpropertychange = e.oninput; // for IE8
    }

every thing works fine but the data appear after the empty row 1-is there a way to select the order where to put the empty row 2- is there a better way for inserting an empty row

Note : i can not use the footer because it is used for summery but that code is not included

Thank you

Edit

Answer 1

According to the creator of Datatables answering a related question :

The row will be positioned according to the ordering applied to the table. Where ever the table's ordering positions the row, that is where it will appear.

My solution would be to use the sorting functionality to do this

Here is a live example of what i would do...

Hope this helps

Answer 2

不需要 jquery，只需将它放在 HTML 表的页脚<tfoot></tfoot>中即可。