我正在尝试在通过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 =显示实际输出
<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>
如果我直接导航到页面 - 没关系。如果我在一个标签中加载它,那么它只是普通表
答案 0 :(得分:2)
我找到了解决方案而且非常简单。 这是我必须在Tabs初始化
中更改的内容$(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();
}
});
});
所以基本上两个dataTables不能存在并且在不同的标签上运行,所以为了使一切工作旧的dataTables实例应该被销毁
答案 1 :(得分:0)
问题出在你解雇$('#rows').dataTable();
你试图在$(document).ready
中做到这一点,但是当你的ajax发射时,它已经消失了。您可能需要做的是将$('#rows').dataTable();
放在回调中,以便在ajax之后重新绘制when选项卡。
如果它不在加载中,那么使用setTimeout稍后调用它,看看会发生什么。如果它仍然无法正常工作,那么请将其置于ajax选项的成功回调中,并再次使用setTimeout技巧。