2

我试图在通过 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=show 实际输出

<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>

如果我直接导​​航到该页面 - 很好。如果我将它加载到选项卡中，那么它只是普通表

4

2 回答 2

2

我找到了解决方案，它真的很简单。这是我在选项卡初始化中必须更改的内容

$(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();
                }
            });
        });

所以基本上两个数据表不能存在并在不同的选项卡上运行，所以为了使一切正常，旧的数据表实例应该被销毁

于 2012-05-15T15:52:21.823 回答
0

问题是当你开火时 $('#rows').dataTable();

您尝试在其中执行此操作，$(document).ready但是当您的 ajax 启动时，这已经消失了。您可能需要做的是$('#rows').dataTable();在 ajax 之后重新绘制选项卡时的回调。

如果它在负载中不起作用，则使用 setTimeout 在一秒钟后调用它，看看会发生什么。如果它仍然不起作用，则将其放入 ajax 选项的成功回调中并再次使用 setTimeout 技巧。

于 2012-04-18T21:30:31.253 回答