title: fnDraw clearing but not reloading DataTable Datasrc MVC JSON Api
body: <p>How can I get it to refresh on the click of the button or else on a timer every minute or so? Thank you.</p>
  
  <p>This is how it looks when I click on "Refresh". It clears the data but doesnt reload it.</p>
  
  <p><a href="https://i.stack.imgur.com/Ozly1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ozly1.jpg" alt="enter image description here"></a></p>
  
  <p>Here's the View code. </p>
  
  <pre><code>&lt;h2&gt;Fixtures&lt;/h2&gt;
  
      &lt;button id="Refresh" type="button"&gt;Refresh&lt;/button&gt;
  
      &lt;table id="fixtures" class="table table-bordered table-hover"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Fixture&lt;/th&gt;
                  &lt;th&gt;Market&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;&lt;/tbody&gt;
      &lt;/table&gt;
  
      @section scripts
  {
          &lt;script&gt;
              $(document).ready(function () {
                  $("#fixtures").DataTable({
                      ajax: {
                          url: "/api/fixtures",
                          dataSrc: ""
                      },
                      columns: [
                          {
                              data: "eventName",
                          },
                           {
                              data: "marketName"
                          }
                      ]
                  });
                  var oFixtureTable = $('#fixtures').dataTable();
  
                  $("#Refresh").click(function (e) {
                      oFixtureTable.fnClearTable(0),
                      oFixtureTable.fnDraw();
                  });
              });
          &lt;/script&gt;
      }
  </code></pre>
  
  <p>EDIT: Simply changing the DataTable to the variable assignment as suggested below causes the DataTable to not render at all (regardless of any additional refresh coding). </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script&gt;
              $(document).ready(function () {
                  //$("#fixtures").DataTable({
                  var FixtureTable = $("fixtures").DataTable({
                      ajax: {
                          url: "/api/fixtures",
                          dataSrc: ""
                      },</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/STnsR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/STnsR.jpg" alt="enter image description here"></a></p>