Multiple datatables under different tabs, one with Ajax source
I have 2 tables under 2 tabs. The table under default tab shows the datatables fine. The second table is populated from Ajax source (JSON array). Problem is I am not able to initialize this table with DataTables.
$(document).ready(function() {
//When page loads...
$(".tab_c开发者_如何学编程ontent").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
if(activeTab == "#tab2"){
$.getJSON("<url>",
function(data) {
htmlTable = '<table id="table2" cellspacing="1" cellpadding="1" border="1">';
htmlTable+=<data...>;
htmlTable +='</tbody></table>';
$('#table2').remove();
$('#tab2').append(htmlTable);
});
}
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
If I explicitly initialize in the success function of the getJSON() call, I see multiple such DataTables on every click of the tab. How to initialize this dataTable...
I have some questions.Why are you using $,getJSON()
when dataTables
has inbuilt functionality for that? Why are you creating the table dynamically onclick
of the tab?IF you want to load the table content only on clicking of second tab then make a static table and put the dataTables initialization code inside the onclick tab2 code
HTML
<div id="tab2" class="tab_content">
<table class="display dataTable" id="table2">
<thead>
<tr>col1</tr>
....
</thead>
<tbody>
</tbody>
</table>
</div>
jQuery
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href");
if(activeTab == "#tab2"){
oTable2 = $('#table2').dataTable({
"bProcessing": true,
"sAjaxSource": "yourURL"
}
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
I still think you should load the second table on page load not on clicking of second tab if the size of the content is not too large
精彩评论