我有一个页面,我必须在每个选项卡下显示 3 个不同的选项卡,那里有一个 jquery 数据表。但是,当页面首先加载时,所有数据表都出现在第一页上,但后来当单击选项卡时,它会同步,这些选项卡使用 bootstrap 编写如下:
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab" >Tab1</a></li>
<li><a href="#tab2" data-toggle="tab" >Tab2</a></li>
<li><a href="#tab3" data-toggle="tab" >Tab3</a></li>
<li><a href="#tab4" data-toggle="tab" >Tab4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div class="row row-border">
<table id="Table1" class="display">
</table>
</div>
</div>
<div id="tab2" class="tab-pane fade in active">
<div class="row row-border">
<table id="Table2" class="display">
</table>
</div>
</div>
<div id="tab3" class="tab-pane fade in active">
<div class="row row-border">
<table id="Table3" class="display">
</table>
</div>
</div>
<div id="tab4" class="tab-pane fade in active">
<div class="row row-border">
</div>
</div>
</div>
</div>
和 javascripts 调用是这样的:
<script>
window.onload = retrieveList;
function retrieveList() {
var table = document.getElementById("Table1");
$.ajax({
type: "POST",
url: "Default.aspx/GetTable1",
data: {},
contentType: "application/json",
dataType: "json",
success: OnSuccess
});
var table1 = document.getElementById("Table2");
$.ajax({
type: "POST",
url: "Default.aspx/GetTable2",
data: {},
contentType: "application/json",
dataType: "json",
success: OnSuccess1
});
var table2 = document.getElementById("Table3");
$.ajax({
type: "POST",
url: "Default.aspx/GetTable3",
data: {},
contentType: "application/json",
dataType: "json",
success: OnSuccess2
});
};
</script>
稍后我认为您不需要的 OnSuccess 功能(如果需要,请发表评论)。
请帮助我最初所有的数据表都出现在第一个选项卡上,尽管我在所有其他选项卡上都需要它。