title: jQuery DataTable refreshing data - MVC View building table first, then trying to display data retrieved via ajax
body: <p>I'm working on MVC5 and I initially load my datatable by iterating through my model data, manually building the table elements On document ready I initialize my table into a .datatable().  This part works just fine.  Now, I allow my user to change what data they want to display (via a dropdown selection, change event fires and calls AJAX controller method, returns JSON objects), but the new initialization of the dataTable doesn't seem to want to cooperate.  Nothing is visible at this point.</p>
  
  <p>Here's my table within my view:</p>
  
  <pre><code>  &lt;table class="table table-bordered" id="accountRequestStatus" name="accountRequestStatus"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Col1&lt;/th&gt;
                              &lt;th&gt;Col2&lt;/th&gt;
                              &lt;th&gt;Col3&lt;/th&gt;
                              &lt;th&gt;Col4&lt;/th&gt;
                              &lt;th&gt;Col5&lt;/th&gt;
                              &lt;th&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          @foreach (var request in Model.PayLoad)
                          {
                              &lt;tr class="registerRow" id="register@(request.Col1)"&gt;
                                  &lt;td class="value registerRow"&gt;@request.Col2&lt;/td&gt;
                                  &lt;td class="value registerRow"&gt;@request.Col3&lt;/td&gt;
                                      &lt;td class="value registerRow"&gt;@request.Col4&lt;/td&gt;
                                      &lt;td class="value registerRow"&gt;@request.EmailAddress&lt;/td&gt;
                                  &lt;td&gt;@Html.ActionLink("Click Me, Bro", ControllerMethod, new { param1 = request.MyParam1 })&lt;/td&gt;
                              &lt;/tr&gt;
                          }
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  </code></pre>
  
  <p>Document Ready:</p>
  
  <pre><code> $(document).ready(function () {
      // Setting the filter button status to the selected value
  
      $('#accountRequestStatus').dataTable();});
  </code></pre>
  
  <p>BAM.  This all works slick, and thank you for that!</p>
  
  <p>Now, when I try to reload the grid with even just a single column, I always get the 'Cannot Reinitialize Datatable'.  When I'm working with a single column, I modify my view's table to only have 1.</p>
  
  <p>My original example had something like 4-5 column, but in my test table I've removed this to a single column.  Here's what I've done to specifically (I think) wire up the column to the data (and add a name too).  The click event calls the LoadDataTable function, shown below.</p>
  
  <pre><code>  function LoadDataTable(data) {        
  
      $('#accountRequestStatus').dataTable(
          {
              paging: false,
              "data": data,
              "columns": [
                 {
                     "data": "CompanyName",
                     "name": "BLAH BLAH"
                 }
              ]
          }
      );}
  </code></pre>
  
  <p>From above, it looks like I'm completely reinitializing the table.  Do I want to do this, or should something else be used?</p>
  
  <p>Here's some of my sample data with the single column, copied from Developer Tools:</p>
  
  <p><img src="https://i.stack.imgur.com/gOSVR.png" alt="enter image description here"></p>
  
  <p>Anything that you can see that I'm doing wrong?  At this point I'd like to just finish the way I've begun so I can call that 'good'.  Any help is appreciated!</p>