JQuery - Change the ajax data source of my datatable
<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>