当您在每次单击选项卡时加载Jquery datatables插件数据时,可以通过以下步骤实现:
<div class="tab">
<button class="tablinks" onclick="loadData('tab1')">选项卡1</button>
<button class="tablinks" onclick="loadData('tab2')">选项卡2</button>
<button class="tablinks" onclick="loadData('tab3')">选项卡3</button>
</div>
<div id="tab1" class="tabcontent">
<!-- 这里显示选项卡1的内容 -->
</div>
<div id="tab2" class="tabcontent">
<!-- 这里显示选项卡2的内容 -->
</div>
<div id="tab3" class="tabcontent">
<!-- 这里显示选项卡3的内容 -->
</div>
function loadData(tabId) {
// 隐藏所有选项卡内容
$(".tabcontent").hide();
// 显示当前选项卡内容
$("#" + tabId).show();
// 检查是否已经初始化了datatables插件
if (!$.fn.DataTable.isDataTable("#" + tabId)) {
// 使用AJAX请求获取数据
$.ajax({
url: "your_data_url", // 替换为您的数据源URL
type: "GET",
dataType: "json",
success: function(data) {
// 使用datatables插件初始化表格
$("#" + tabId).DataTable({
data: data,
columns: [
{ title: "列1" },
{ title: "列2" },
// 添加更多列...
]
});
},
error: function() {
console.log("加载数据失败");
}
});
}
}
在上述代码中,您需要将"your_data_url"替换为您实际的数据源URL,该URL应返回一个包含表格数据的JSON格式。
这样,当您单击选项卡时,将会加载相应选项卡的数据,并使用datatables插件将数据显示为可交互的表格。
推荐的腾讯云相关产品:腾讯云云服务器(https://cloud.tencent.com/product/cvm)和腾讯云数据库MySQL版(https://cloud.tencent.com/product/cdb_mysql)可以提供稳定的云计算基础设施和数据库服务,以支持您的应用程序的部署和数据存储需求。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云