title: Dynamically adding rows to datatable using ajax with pagination and sorting
body: <p>I am trying to achieve <a href="https://almsaeedstudio.com/themes/AdminLTE/pages/tables/data.html" rel="nofollow noreferrer">https://almsaeedstudio.com/themes/AdminLTE/pages/tables/data.html</a> - "Data Table With Full Features"</p>
  
  <p>When I added tbody statically, pagination and sorting works fine but when I add tbody using jquery as given below, rows are added but pagination and sorting fails.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table id="tblItems"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;code&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Description&lt;/th&gt;
              &lt;th&gt;Image&lt;/th&gt;
              &lt;th&gt;Parent&lt;/th&gt;
              &lt;th&gt;Location&lt;/th&gt;
              &lt;th&gt;Category&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>jquery</strong></p>
  
  <pre><code>$(document).ready(function() {
      $('#tblItems').DataTable({
          "paging": true,
          "lengthChange": false,
          "searching": false,
          "ordering": true,
          "info": true,
          "autoWidth": false,
          "sDom": 'lfrtip'
      });
      $('#tblItems').append('&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;asdsa34id&lt;/td&gt;&lt;td&gt; asdsa34id &lt;/td&gt;&lt;td&gt;asdsa34id &lt;/td&gt;&lt;td&gt; asdsa34id&lt;/td&gt;&lt;td&gt;asdsa34id&lt;/td&gt;&lt;td&gt;asdsa34id&lt;/td&gt;&lt;td&gt;asdsa34id&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;');
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/techjerk2013/vwpsxhaL/" rel="nofollow noreferrer">https://jsfiddle.net/techjerk2013/vwpsxhaL/</a></p>
  
  <p><strong>Updated Code</strong></p>
  
  <p>The updated code doesn't populate the table though there are data from the response. Though I set the deferRender to true, still the datatable is empty.</p>
  
  <pre><code>$(document).ready(function() {
      PopulateItemsTable();
      BindTable();
  });
  
  function BindTable() {
      $("#tblItems").DataTable({
          "deferRender": true,
          "paging": true,
          "lengthChange": false,
          "searching": false,
          "ordering": true,
          "info": true,
          "autoWidth": false,
          "sDom": 'lfrtip'
      });
  }
  
  function PopulateItemsTable() {
      var txt = "";
      $.ajax({
          type: "POST",
          url: "Item.aspx/Search",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (response) {
              var jsonObject = JSON.parse(response.d);
              if (jsonObject) {
                  var len = jsonObject.length;
                  if (len &gt; 0) {
                      for (var i = 0; i &lt; len; i++) {
                          if (jsonObject[i].Id) {
                              Id = jsonObject[i].Id;
                          }
                          else {
                              Id = '';
                          }
                          if (jsonObject[i].Name) {
                              Name = jsonObject[i].Name;
                          }
                          else {
                              Name = '';
                          }
                          if (jsonObject[i].Description) {
                              Description = jsonObject[i].Description;
                          }
                          else {
                              Description = '';
                          }
                          if (jsonObject[i].Image) {
                              Image = jsonObject[i].Image;
                          }
                          else {
                              Image = '';
                          }
                          if (jsonObject[i].Parent) {
                              Parent = jsonObject[i].Parent;
                          }
                          else {
                              Parent = '';
                          }
                          if (jsonObject[i].Location) {
                              Location = jsonObject[i].Location;
                          }
                          else {
                              Location = '';
                          }
                          Category = '';
  
                          txt += "&lt;tr&gt;&lt;td&gt;" + Id + "&lt;/td&gt;&lt;td&gt;" + Name + "&lt;/td&gt;&lt;td&gt;" + Description + "&lt;/td&gt;&lt;td&gt;" + Image + "&lt;/td&gt;&lt;td&gt;" + Parent + "&lt;/td&gt;&lt;td&gt;" + Location + "&lt;/td&gt;&lt;td&gt;" + Category + "&lt;/td&gt;&lt;/tr&gt;";
                          $('#tblItems').append('&lt;tbody&gt;' + txt + '&lt;/tbody&gt;');
                      }
                  }
                  else {
                      $("#tblItems").append("No records found");
                  }
  
              }
          },
          failure: function () {
              $("#tblItems").append(" Error when fetching data please contact administrator");
          }
      });
  }
  </code></pre>
  
  <h1>Answer</h1>
  
  <p>With the help of people answered below, the code below works as expected.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      var myTable;
  
      $(document).ready(function () {
          BindItemTable();
          PopulateItemsTable();
  
      });
  
      function BindItemTable() {
          myTable = $("#tblItems").DataTable({
              "deferRender": true,
              "paging": true,
              "lengthChange": false,
              "searching": false,
              "ordering": true,
              "info": true,
              "autoWidth": false,
              "sDom": 'lfrtip'
          });
      }
  
      function PopulateItemsTable() {
          $.ajax({
              type: "POST",
              url: "ItemManagement.aspx/SearchIdList",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (response) {
                  var jsonObject = JSON.parse(response.d);
                  var result = jsonObject.map(function (item) {
                      var result = [];
                      result.push(item.Id);
                      result.push(item.Name);
                      result.push(item.Description);
                      result.push(item.Image);
                      result.push(item.Parent);
                      result.push(item.Location);
                      result.push("");
                      return result;
                  });
                  myTable.rows.add(result);
                  myTable.draw();
              },
              failure: function () {
                  $("#tblItems").append(" Error when fetching data please contact administrator");
              }
          });
      }
  &lt;/script&gt;
  </code></pre>