title: Datatables Dynamic URL from button click
body: <p>I am new to JavaScript and although I find many questions regarding this topic..I think I need a bit more complete example/explanation.</p>
  <p>Using ASP.NET Core and Datatables in a separate js file.
  The Datatable loads fine, but now I've added a couple of buttons to my View and on Click I would like to apply a filter to the data. In my AP CALL in Controller I have a SWITCH statement to catch the filter parameter and return the filtered JSON.</p>
  <p>View:</p>
  <pre><code>&lt;input id=&quot;btnOpen&quot; type=&quot;submit&quot; value=&quot;Open&quot; /&gt;
                              &lt;input id=&quot;btnTraded&quot; type=&quot;submit&quot; value=&quot;Traded&quot; /&gt;
                              &lt;input id=&quot;btnClosed&quot; type=&quot;submit&quot; value=&quot;Closed&quot; /&gt;
                              &lt;input id=&quot;btnAll&quot; type=&quot;submit&quot; value=&quot;All&quot; /&gt;
  </code></pre>
  <p>Controller:</p>
  <pre><code>#region API CALLS
      [HttpGet]
      public IActionResult GetAll(string filter)
      {            
          switch (filter)
          {
              case &quot;Traded&quot;:
  ...
  </code></pre>
  <p>JS: I have .onClick for each Button (sure there is a better way)</p>
  <pre><code>(function () {
  $(&quot;#btnOpen&quot;).click(function () {
      dataTable.ajax.url(&quot;/Customer/Invoice/GetAll?filter=Open&quot;).load;
  });});
  (function () {
  $(&quot;#btnTraded&quot;).click(function () {
      dataTable.ajax.url(&quot;/Customer/Invoice/GetAll?filter=Traded&quot;).load;
  });
  </code></pre>
  <p>});</p>
  <p>JS: For table</p>
  <pre><code>function loadDataTable() {
  dataTable = $('#datatables-reponsive').DataTable({
      responsive: true,
      &quot;ajax&quot;: {
          
          &quot;url&quot;: &quot;/Customer/Invoice/GetAll&quot;,  
      },
      &quot;columnDefs&quot;: [{......
  </code></pre>
  <p>The onClicks reloads the table but the original data without the filter being passed to the API Call.</p>
  <hr />
  <p>UPDATE:
  The problem was that I should call OnLoad() as a function.
  There was also some problem with the button OnClick function which never fired although the page did refresh. So I changed it as follows:
  View:</p>
  <pre><code> &lt;input onclick=&quot;filter('open');&quot; value=&quot;Open&quot; /&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>function filter(data) {
  if (data == &quot;traded&quot;) {
      dataTable.ajax.url(&quot;/Customer/Invoice/GetAll?filter=Traded&quot;).load();
  }
  else if (data == &quot;open&quot;) {
      dataTable.ajax.url(&quot;/Customer/Invoice/GetAll?filter=Open&quot;).load();
  }
  else if .......
  </code></pre>