title: Add Empty Row(For Insert) in jquery Datatable (Not Editor) in bottom after data
body: <p>my question is not how to put the empty row its why the empty row appear as first row </p>
  
  <pre><code>   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":
                ' &lt;button class="btn btnEdit" type="button"&gt; &lt;i class="fa fa-pencil " style="font-size:20px"&gt;&lt;/i&gt; &lt;/button&gt; &lt;button class="btn btnDelete" type="button"&gt; &lt;i class="fa fa-trash " style="font-size:20px"&gt;&lt;/i&gt; &lt;/button&gt;'
  
           }
                      ],
  
                  });
                  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 = $('&gt;td', rowNode);
              jqTds[0].innerHTML = '&lt;table style="width:100%"&gt;&lt;tr&gt;&lt;td&gt;&lt;input type="button" id="btnNewCenter"   value="..." &gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="twitterStyleTextbox" style="width:60px" id="txtNewCenter_No" readonly &gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
              jqTds[1].innerHTML = '&lt;input type="text" class="twitterStyleTextbox" readonly id="txtNewCenterName" &gt;';
              jqTds[2].innerHTML = '&lt;input type="number" style="width:60px" id="txtNewCenterVal" class="twitterStyleTextbox"&gt;';
              jqTds[3].innerHTML = '&lt;input type="number" style="width:60px" id="txtNewCenterPerc" class="twitterStyleTextbox"&gt;';
              jqTds[4].innerHTML = '&lt;button class="btn btnSubNewCenterSave" type="button"&gt; &lt;i class="fa fa-save " style="font-size:20px"&gt;&lt;/i&gt; &lt;/button&gt; '
          }
          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
      }
  </code></pre>
  
  <p>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</p>
  
  <p>Note : i can not use the footer because it is used for summery but that code is not included</p>
  
  <p>Thank you</p>
  
  <p>Edit </p>
  
  <p><a href="https://i.stack.imgur.com/EfN4E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EfN4E.png" alt="enter image description here"></a></p>