title: Put new rows at the specific position of the jQuery datatable
body: <p><strong>DEFAULT</strong><br>
  I create <code>ajax datatable</code>, which rows are sometimes filled by json in the end of table: <a href="http://jsfiddle.net/jezrael/7j19hj5s/2/" rel="nofollow noreferrer">jsfiddle</a> and sometimes in the top of table. It depends of time of ajax response.</p>
  
  <p><strong>RECOMMENDED OUTPUT</strong><br>
  I have two input jsons from two different sources and output is this table:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
      ...
      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;&lt;/tr&gt; &lt;!-- inserted row--&gt;
      &lt;tr&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;&lt;/tr&gt; &lt;!-- inserted row--&gt;
      &lt;tr&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;&lt;/tr&gt; &lt;!-- inserted row--&gt;
      &lt;tr&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;&lt;/tr&gt; &lt;!-- inserted row--&gt;
      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
      ...
      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Rows from 2. json are inserted in table (created from 1. json) to specific position. This position is constant, lengths of 1. and 2. json data are constant.</p>
  
  <p><strong>FIRST SOLUTION</strong><br>
  I have to add first column containing a number and sort the datatable descending by it - <a href="http://jsfiddle.net/jezrael/7j19hj5s" rel="nofollow noreferrer">jsfiddle</a>. I can hide first column <a href="http://jsfiddle.net/jezrael/7j19hj5s/1/" rel="nofollow noreferrer">jsfiddle</a>, but I rather use custom function, because it doesn't work in IE8.</p>
  
  <pre><code>var t = $("#tab1").DataTable({
      "ajax": "data1.json",
      columnDefs: [
           { className: "hide", "targets": [ 0 ] },
           ], 
      "columns": [
          { "data": "id"},
          { "data": "cat1"},
          { "data": "cat2"},
          { "data": "cat3"}
      ]
  });
  
  $.ajax({
      type: "GET",
      url: "data2.json",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (response) {
          t.rows.add(response.data); 
          t.draw();
      }
    });
  </code></pre>
  
  <p><strong>IDEA - CUSTOM FUNCTION</strong><br>
  I try to create custom function <code>rows.addinposition(rows, position)</code>, but it works as function <code>rows.add()</code>.<br>
  I copied and modified function rows.add found in <code>jquery.dataTables.js</code> at <a href="https://github.com/DataTables/DataTables/blob/master/media/js/jquery.dataTables.js#L7879" rel="nofollow noreferrer">line 7879</a>, I changed <code>out.push()</code> to <code>out.splice()</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice" rel="nofollow noreferrer">splice docs</a>.  </p>
  
  <p>I know, it is not recommended, better is extend datatables api...</p>
  
  <pre><code>_api_register( 'rows.addinposition()', function ( rows, position ) {
      var newRows = this.iterator( 'table', function ( settings ) {
              var row, i, ien;
              var out = [];
  
              for ( i=0, ien=rows.length ; i&lt;ien ; i++ ) {
                  row = rows[i];
  
                  if ( row.nodeName &amp;&amp; row.nodeName.toUpperCase() === 'TR' ) {
                      //ROWS.ADD USE OUT.PUSH
                      //out.push( _fnAddTr( settings, row )[0] );
                      //CHANGED TO OUT.SPLICE
                      out.splice( position, 0, _fnAddTr( settings, row )[0] );
                  }
                  else {
                      out.splice( position, 0, _fnAddData( settings, row ) );
                  }
              }
              console.log(out);
              return out;
  
          }, 1 );
  
      // Return an Api.rows() extended instance, so rows().nodes() etc can be used
      var modRows = this.rows( -1 );
      modRows.pop();
      modRows.push.apply( modRows, newRows.toArray() );
  
      return modRows;
  } );    
  </code></pre>
  
  <p>It would be great if you could help me.</p>
  
  <p>I found similar questions: </p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/24626611/how-to-add-a-new-row-in-top-of-a-json-datatable-with-already-existing-records">SO link</a>: function <code>fnAddData()</code> in version 1.9 Datatables</li>
  <li><a href="https://stackoverflow.com/questions/24927293/how-to-add-multiple-rows-in-datatables-jquery/24929043#24929043">SO link</a> - add multiply rows to end of datatable</li>
  <li><a href="https://stackoverflow.com/questions/26488392/jquery-datatables-new-row-as-first-row">SO link</a> - no answer</li>
  <li><a href="https://datatables.net/forums/discussion/26774/adding-a-row-in-the-middle-of-the-table" rel="nofollow noreferrer">datatables forum link</a> - old version, no answer (I think)</li>
  </ul>
  
  <p><strong>EDIT</strong><br>
  Thank you davidkonrad, but I test it in <a href="http://jsfiddle.net/jezrael/p4wcfzfe/2" rel="nofollow noreferrer">jsfiddle</a>, and I found 2 problems: </p>
  
  <ul>
  <li>ordering is wrong 2.,1., not 1.,2. - I think easy problem</li>
  <li>sometimes this added rows are on the top of table, sometimes in right position. Randomly. - maybe big problem</li>
  </ul>
  
  <p>I debug it in <a href="http://jsfiddle.net/jezrael/p4wcfzfe/2" rel="nofollow noreferrer">jsfiddle</a> and its behaviour is very strange:</p>
  
  <pre><code>console.log('rowCount = '+rowCount);
  </code></pre>
  
  <p><strong>if rows are on the top (bad position)</strong> return:</p>
  
  <pre><code>rowCount = 0
  rowCount = 1
  </code></pre>
  
  <p>and <code>for</code> didn't loop, because firebug doesn't  show <code>var i</code>.</p>
  
  <p><strong>if they are in good position</strong>, return:</p>
  
  <pre><code>rowCount = 5
  rowCount = 6
  </code></pre>
  
  <p>and <code>for</code> looped and <code>var i</code> returned in this example:<br>
  1. loop:  </p>
  
  <pre><code>i = 5 
  i = 4 
  i = 3
  </code></pre>
  
  <p>2.loop:</p>
  
  <pre><code>i = 6 
  i = 5 
  i = 4 
  i = 3
  </code></pre>
  
  <p>Did i missed something? Why order is strange?</p>