我试图在通过 AJAX 加载的 Jquery 选项卡中显示 DataTable。 当我在浏览器中打开页面时,它显示得很好,但在 AJAX 情况下,它只是作为纯表格显示在选项卡内。 我做错了什么或者没有可能这样做吗? 感谢您的回复。
根据要求,这是代码。 加载库和CSS,将无序列表转换为选项卡
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script>
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Some problem occured." +
"Probably the server is overloaded" );
}
}
});
});
</script>
实际选项卡
<div id="tabs">
<ul>
<li><a href="picklists.php?id=1"><span>Ready to be Picked</span></a></li>
<li><a href="picklists.php?id=2"><span>Shipping Ready</span></a></li>
<li><a href="picklists.php?id=3"><span>Picklists in Proforma</span></a></li>
<li><a href="picklists.php?id=4"><span>Picklists in Invoice</span></a></li>
<li><a href="picklists.php?id=5"><span>Picklists Shipped</span></a></li>
</ul>
</div>
然后,通过 AJAX 加载 picklist.php 文件。我将跳过代码,只需 w=显示实际输出
block 引用> block 引用><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jquery-ui-1.8.18.custom.min.js"></script> <link rel="stylesheet" type="text/css" href="js/ui-lightness/jquery-ui-1.8.18.custom.css" /> <table id="rows"> <thead> <tr> <td> Invoice no. </td> <td> Company </td> <td> Items </td> <td> Payment </td> </tr> </thead> <tbody> <tr>HERE COMES SOME INFORMATION</tr> </tbody> </table> <script language="JavaScript"> $(document).ready(function(){ $('#rows').dataTable(); }); </script>
如果我直接导航到该页面 - 那就没问题。如果我将其加载到选项卡中,那么它只是普通表格
最佳答案
我找到了解决方案,而且非常简单。 这是我必须在选项卡初始化中更改的内容
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Some problem occured." +
"Probably the server is slow again." );
}
},
load: function(event, ui) {
},
select: function(event, ui) {
$('#rows').remove();
}
});
});
所以基本上两个数据表不能存在并在不同的选项卡上运行,因此为了使一切正常工作,旧的数据表实例应该被销毁
关于ajax - Jquery UI 选项卡和数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10195140/