title: JQuery - Change the ajax data source of my datatable
body: <p>I currently have the following script on my page:</p>
  
  <p>HTML+JS Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
  &lt;select&gt;
    &lt;option value="data_20160712"&gt;data_20160712&lt;/option&gt;
    &lt;option value="data_20160711"&gt;data_20160711&lt;/option&gt;
  &lt;/select&gt;     
  &lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;  
      &lt;table id="data0" cellspacing="0" width="100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;F1&lt;/th&gt;
                  &lt;th&gt;F2&lt;/th&gt;
                  &lt;th&gt;F3&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;F1&lt;/th&gt;
                  &lt;th&gt;F2&lt;/th&gt;
                  &lt;th&gt;F3&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js "&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.colVis.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.12/dataRender/datetime.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          // Setup - add a text input to each footer cell
          $('#data0 tfoot th').each(function(i) {
              var title0 = $('#data0 thead th').eq($(this).index()).text();
              $(this).html('&lt;input type="text" placeholder="Search ' + title0 + '" data-index="' + i + '" /&gt;');
          });
  
          // DataTable
          var table = $('#data0').DataTable({
              "pageLength": 10,
              "lengthChange": true,
              responsive: true,
              //fixedHeader: false,
              "scrollX": true,
              "ajax": "data_20160712.json",
              deferRender: true,
              dom: 'Blfrtip',
              buttons: [{
                      extend: 'excelHtml5',
                      title: "data_20160712"
                  }, {
                      extend: 'csvHtml5',
                      title: "data_20160712"
                  }, {
                      extend: 'colvis',
                      title: "data_20160712"
                  }, ]
                  //FIX HEADER SIZE
          });
          // Apply the search
          table.columns().every(function() {
              var that = this;
  
              $('input', this.footer()).on('keyup change', function() {
                  if (that.search() !== this.value) {
                      that
                          .search(this.value)
                          .draw();
                  }
              });
          });
      });
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>data_20160712.json:</strong></p>
  
  <pre><code>{"data": [
      ["20160712","20160712","20160712"],
      ["20160712","20160712","20160712"],
      ["20160712","20160712","20160712"]
  ]
  }
  </code></pre>
  
  <p><strong>data_20160711.json:</strong></p>
  
  <pre><code>{"data": [
      ["20160711","20160711","20160711"],
      ["20160711","20160711","20160711"],
      ["20160711","20160711","20160711"]
  ]
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/L4Dn1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L4Dn1.png" alt="Example"></a></p>
  
  <p>How can I control the <strong>YYYYMMDD</strong> value dynamically with another function and a select box on the page so that the data in the datable updates dynamically when the data source changes?</p>
  
  <p>Thanks for your help.</p>
  
  <p><a href="https://jsfiddle.net/airgonomike/bga5bt9g/3/" rel="nofollow noreferrer">JSFIDDLE</a></p>