JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#current" id="toggle-current">Current</a> | <a href="#archives" id="toggle-archives">Archives</a>
<table id="session_summary_archive" class="nowrap" cellspacing="0">
<thead>
<tr><th>Session</th><th>Date</th><th>Time</th><th>Name</th><th>mngr_name</th><th>vpts_name</th><th>MNGR</th><th>VPTS</th><th>id</th></tr>
</thead>
<tbody>
</tbody>
</table>

JavaScript

var timeframe = "current"; //setting timeframe var. I can change this manually and the ajax response will be correct.
$('#session_summary_archive').dataTable( {
    "ajax": {
        "url": "URL",
        "type": "POST",
        "data": {"timeframe": timeframe},
        "dataSrc": ""
    }
});

//On click, reload our table
var archiveTable = $('#session_summary_archive').DataTable(); // get our datatable instance
$('#toggle-archives').click(function(){
    timeframe = 'archive';
    archiveTable.ajax.reload();
});
$('#toggle-current').click(function(){
    timeframe = 'current';
    archiveTable.ajax.reload();
});