title: How to draw a table with dynamic data using D3 and DataTable
body: <p>I am trying to draw a table using D3 and also using <code>DataTable()</code> for other functionalities like sorting the columns, overall table search etc. But I am not able to go along with DataTable. I have dynamic <code>data</code> coming which I will have to populate in the table dynamically(extra rows addition). For this, I delete the entire table everytime I am tabulating the table. I am able to do it with normal d3 table, but when I try to use the DataTable, it throws the below error. </p>
  
  <p>I have a drop-down menu from which user can select any item. <code>listen_change</code> listens for such a change and draws the table with data corresponding to that item which I fetch using ajax from DB. DB keeps getting updated from somewhere else.</p>
  
  <p>I want to know a way to use <code>DataTable</code> without reinitialising it (as the error alert tells) for my dynamic table. Any help would be appreciated. Thanks in advance.</p>
  
  <p>I am getting the following alert,</p>
  
  <blockquote>
    <p>DataTables warning: table id=table_id - Cannot reinitialise
    DataTable. For more information about this error, please see
    <a href="http://datatables.net/tn/3" rel="nofollow noreferrer">http://datatables.net/tn/3</a></p>
  </blockquote>
  
  <p>The Javascript part of the code is:</p>
  
  <pre><code>function listen_change() {
  var timeOutId = 0;
  document.getElementById('select_item').addEventListener('change',function() {
      var e = document.getElementById("select_item");
      var item_name = e.options[e.selectedIndex].text;
      clearTimeout(timeOutId);
      (function worker() {
          $.ajax({
              url: '/my_url/' + item_name + '/',
              success: function(data) {
                  //delete_table(table_id)
                  table_data(data)
              },
              complete: function() {
                  // Schedule the next request when the current one's complete
                  timeOutId = setTimeout(worker, 3000);
              }
          });
      })();
  });
  }
  function table_data(data){
      //puts data in the format required to draw D3 table
      tabulate(table_id, data, columns)
  }
  
  function tabulate(container, data, columns){
      var table = d3.select(container).attr("width",1)
      var thead = table.append('thead')
      var tbody= table.append('tbody')
      var headers = thead.append("tr")
                         .selectAll("th")
                         .data(columns)
                         .enter()
                         .append("th")
                         .text(function(column) {
                                  return column; 
                              })
      // create a row for each object in the data
      var rows = tbody.selectAll("tr")
                      .data(data)
                      .enter()
                      .append("tr");
      // create a cell in each row for each column
      var cells = rows.selectAll("td")
                      .data(function(row) {
                              return columns.map(function(column,id) {
                                                  return {column: column, value: row[column]};
                                                  }); 
                      })  
                      .enter()
                      .append("td")
                      .attr("style", "font-family: Arial") // sets the font style
                      .html(function(d) { 
                              return d.value; 
                          });
      $(document).ready(function(){
          var o_table = $('#table_id').DataTable({
                                      'bSort': true,
                                      'bFilter': true,
                                      "autoWidth":true,
                                      "scrollY":        "600px",
                                      "scrollCollapse": true,
                                      "info":           true,
                                      "paging":        true,
                                      "bLengthChange" : true,
                                      "iDisplayLength":60,
                                      "aLengthMenu" : [30,60,100],
                                      });
                      })
      return table;
  }
  </code></pre>
  
  <p>The html part is:</p>
  
  <pre><code>&lt;div&gt;
      &lt;table class="table table--bordered table--highlight" align='center' cellspacing=50 cellpadding=20 id="table_id"&gt;
      &lt;/table&gt;
  &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
        $(document).ready(function(){
          listen_change();
       });
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>I tried giving <code>'bDestroy' : true</code> in <code>DataTable()</code>and I am clearing data inside the table using <code>$('table_id').empty()</code>. This helps me in destroying the <code>DataTable</code> instance and helps me replace the table and thus the data changes dynamically. But, this brings me to a new problem now. I am updating the table every 3 seconds as mentioned in the code. Now, if user tries to search for anything using the search option, it works but after 3 seconds, the whole table comes up back. How to update the data dymanaically without affecting the search feature? Any help would be appreciated. Thanks in advance.</p>