title: Correct way to append data into existing data table using ajax
body: <p><strong>Introduction</strong></p>
  <p>I am working with the functions where user search donor organizations by name.</p>
  <p>Data loads in DataTable, paging enabled and works fine for the initial data load.
  (Data load with initial call from jquery is about 100 records)</p>
  <p>Lately, i have tried to implement the ajax method, which is suppose to load &quot;next 100 records&quot; and append to the existing records(now record reaches at 200 aprox).</p>
  <p><strong>Problem</strong></p>
  <p>Record loading on ajax call is loaded into datatable but displays this recent record on current page(no paging applied on it).</p>
  <p>When user change the page to navigate between records, this recent record disappear.</p>
  <p>I am just manipulating DOM elements, i think i have to pass it to datatable, yes?</p>
  <p><strong>Complete Code(just copy and paste whole code to test,cdn libs used)</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if IE 8]&gt; &lt;html lang=&quot;en&quot; class=&quot;ie8&quot;&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 9]&gt; &lt;html lang=&quot;en&quot; class=&quot;ie9&quot;&gt; &lt;![endif]--&gt;
  &lt;!--[if !IE]&gt;&lt;!--&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;!--&lt;![endif]--&gt;
  
      &lt;head&gt;
          &lt;title&gt;Demo : Test&lt;/title&gt;
          &lt;!-- Meta --&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
          &lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css&quot;&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;col-md-3&quot;&gt;
                      &lt;form&gt;
                          &lt;input type=&quot;text&quot; id=&quot;searchParam&quot; name=&quot;searchParm&quot; placeholder=&quot;enter search param&quot;&gt;
                          &lt;br&gt;
                          &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; onclick=&quot;searchDonors(document.getElementById('searchParam').value); return false;&quot;&gt;
                      &lt;/form&gt;
                      &lt;br /&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md-9&quot;&gt;
                      &lt;div id=&quot;demoApim&quot;&gt;&lt;table id=&quot;demoApi&quot;&gt;&lt;thead&gt;&lt;tr&gt;&lt;td&gt;Organization Name&lt;/td&gt;&lt;td&gt;Address&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody id=&quot;tBody&quot;&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md-3&quot; id=&quot;searchBtn&quot;&gt;&lt;input type=&quot;submit&quot; value=&quot;Load Next 100 Records&quot; onclick=&quot;loadNext(); return false;&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.jquery.com/jquery-2.1.4.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;text/javascript&quot;&gt;
              var count;
              $('#searchBtn').hide();
              $(document).ready(function () { $('table').hide();});
              function searchDonors(searchParam) {
                  window.searchDonorsParam = searchParam;
                  count = 100;
                  var request = new XMLHttpRequest();
                  request.open(&quot;GET&quot;, &quot;http://graphapi.firstgiving.com/v1/list/organization?q=organization_name:&quot; + searchParam + &quot;*%20AND%20country:US&amp;&amp;page_size=100&amp;page=1&quot;, false);
                  request.send();
                  var xml = request.responseXML;
                  //$.each(xml, function (key, val) {
                  var oName = xml.getElementsByTagName(&quot;organization_name&quot;);
                  //console.log(oName);
                  var oAddress = xml.getElementsByTagName(&quot;address_line_1&quot;);
                  var counts = xml.getElementsByTagName(&quot;organization_name&quot;).length;
                  for (var i = 1; i &lt; counts; i++) {
                      var html = [];
                      html.push('&lt;tr&gt;&lt;td&gt;', oName[i].innerHTML)
                      html.push('&lt;/td&gt;&lt;td&gt;', oAddress[i].innerHTML)
                      html.push('&lt;/td&gt;&lt;/tr&gt;')
                      $(&quot;#tBody&quot;).append(html.join(''));
                  }
                  $('#demoApi').DataTable();
                  $('table').show();
                  $('#searchBtn').show();
                  //});
                  //console.log(oName);
                  //console.log(oAddress);
              }
      
              function loadNext()
              {
              if (count = 100)
              {
                  $.ajax({
                      url: &quot;http://graphapi.firstgiving.com/v1/list/organization?q=organization_name:&quot; + searchDonorsParam + &quot;*%20AND%20country:US&amp;&amp;page_size=100&amp;page=2&quot;,
                      method: &quot;GET&quot;,
                      dataType: &quot;xml&quot;,
                      success: function (xml) {
                          var xmlDoc = $.parseXML(xml),
                          $xml = $(xmlDoc);
                          console.log(xml.getElementsByTagName(&quot;organization_name&quot;));
                          var oNameMore = xml.getElementsByTagName(&quot;organization_name&quot;);
                          var oAddressMore = xml.getElementsByTagName(&quot;address_line_1&quot;);
                          var countsNew = xml.getElementsByTagName(&quot;organization_name&quot;).length;
                          var html;
                          for (var i = 1; i &lt; countsNew; i++) {
                              html = [];
                              html.push('&lt;tr&gt;&lt;td&gt;', oNameMore[i].innerHTML)
                              html.push('&lt;/td&gt;&lt;td&gt;', oAddressMore[i].innerHTML)
                              html.push('&lt;/td&gt;&lt;/tr&gt;')
                              $(&quot;#tBody&quot;).append(html.join(''));
                          }
                          },
                      error: function () {
                          console.log(&quot;call failled&quot;);
                      }
                  });
              }
              }
          &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  <p>If someone have idea about that problem please let me know, any kind of help or reference will be appreciated.</p>