当我们点击tab时,它将加载
ajax/tab.jsp?a=1
在动态分区中。
所以每次你点击一个标签就会发生这种情况。
但是你的
Datatable
代码只写一次,在
jsp
文件已加载
所以你的数据表不会出现。
解决这个问题
-
你需要打电话
$('#example').DataTable();
每次单击选项卡时
-
并确保在加载jsp内容之后调用if。
你可以用
tabsbeforeload
标签事件。
注:
我添加了超时只是为了延迟事情以便加载jsp。
如果您的jsp需要更多的时间来加载,请尝试增加超时值。
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(function () {
$("#tabs").tabs({
beforeLoad: function (event, ui) {
// load first time
setTimeout(function () {
$('#example').DataTable();
}, 30);
ui.jqXHR.fail(function () {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
});
}
});
// before tabload
$("#tabs").on("tabsbeforeload", function (event, ui) {
console.log("dd");
$("#example").remove(); // to avoide duplicate id as Datatable will not load for other Tabs
setTimeout(function () {
$('#example').DataTable();
}, 30);
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="ajax/tab.jsp?a=1">Tab 1</a></li>
<li><a href="ajax/tab.jsp?a=2">Tab 2</a></li>
<li><a href="ajax/tab.jsp?a=3">Tab 3</a></li>
<li><a href="ajax/tab.jsp?a=4">Tab 4</a></li>
</ul>
</div>
</body>
</html>