title: Reload dataTables after button click
body: <p>I'm sure there are a few (better) ways to do this, but I can't get any way to work. I'm trying to have datatables load new data (from different data source) when a button is clicked.</p>
  
  <p>Here's what I have:</p>
  
  <pre><code>$(document).ready(function() {
  
    $('#datatable2').dataTable( {
  
      "ajax": {
        "url":"simple4.php",
        "type":"GET"
      }  ,
  
      "paging":        true, 
      "pageLength": 20,
      "order": [[ 2, "asc" ]],
      "aoColumns": [
        { "bSortable": false, "width": "25%"  },
        { "bSortable": true, "width": "30%"  },
        { "bSortable": true, "width": "15%"  },
        { "bSortable": true, "width": "15%"  },
  
        { "bSortable": true, "width": "15%"  },
        { "bSortable": false, "width": "0%", "visible":false  },
  
      ],
    });
  
    $( "#option2" ).click(function() {
      table.ajax.url( 'simple3.php' ).load();
    }); 
  });
  </code></pre>
  
  <p>The initial table (from simple4.php) loads fine. I'd like it to change when I click on a button (with id=option2 in this case), but nothing happens when I click the button.</p>
  
  <p>Just in case, here's the button code in case I'm missing something obvious:</p>
  
  <pre><code>&lt;label class="btn btn-default"&gt;
  &lt;input type="radio" name="options" id="option2" value="1" autocomplete="off"&gt; Compare 1 and 2
  &lt;/label&gt;
  </code></pre>
  
  <p>Not sure what the issue is. Any insight would be helpful. </p>
  
  <p>UPDATE: see answers below explanation of the issue. One thing I didn't do, which apparently makes a major difference is using "dataTable" versus "DataTable". You need a capital D and capital T. Here's the fixed code that's working now:</p>
  
  <pre><code>$(document).ready(function() {
  var table = $("#datatable2").DataTable({
  
    "ajax": {
      "url":"simple3.php",
      "type":"GET"
  }  ,
  
     "paging":        true, 
     "pageLength": 20,
  "order": [[ 2, "asc" ]],
    "aoColumns": [
    { "bSortable": false, "width": "25%"  },
    { "bSortable": true, "width": "30%"  },
   { "bSortable": true, "width": "15%"  },
    { "bSortable": true, "width": "15%"  },
  
     { "bSortable": true, "width": "15%"  },
    { "bSortable": false, "width": "0%", "visible":false  },
  
    ],
  
  });
  $( "#option2" ).click(function() {
  table.ajax.url( "simple4.php" ).load();
  });
  });
  </code></pre>
  
  <p>One more thing...my function that was supposed to fire when I clicked on my radio button wasn't working. Had to change from this:</p>
  
  <pre><code>$( "#option2" ).click(function() {
  table.ajax.url( "simple4.php" ).load();
  });
  </code></pre>
  
  <p>To this:</p>
  
  <pre><code>$('input[id=option2]').change(function(){
  table.ajax.url( "simple4.php" ).load();
  });
  </code></pre>