how to reload jtable content when clicking tab

how to reload jtable content when clicking tab

I am using jtable jquery plugin and got everything working for a given
tab. But when I click on a different tab, it appears that jquery or jtable
caching the URL it's sending to the server, so it gets the same response.
I am trying to pass the dynamic tabId to the URL so it'll load appropriate
content for that given tab. But it keeps sending whatever the first tab
that gets clicked on.
<div id="myTab">
<ul>
<li><a id="tab1" class="tab" href="#dataTable">Tab1</a></li>
<li><a id="tab2" class="tab" href="#dataTable">Tab2</a></li>
<li><a id="tab3" class="tab" href="#dataTable">Tab3</a></li>
</ul>
<div id="dataTable"></div>
</div>
Javascript:
$(".tab").on("click", function(event) {
var tabId = $(this).attr("id");
$('#dataTable').jtable({
title: 'My Table',
actions: {
listAction: 'comparison/' + tabId
},
fields: {
column1: {
key: true,
list: true,
title: 'Name'
},
column2: {
title: 'Column1',
width: '30%'
},
column3: {
title: 'Column2',
width: '20%'
},
column4: {
title: 'Column3',
width: '30%'
}
}
});
$('#dataTable').jtable('load');
});
Any help would really be appreciated.
Regards Tin