jQuery UI选项卡和数据表

Question

I am trying to display a DataTable inside a Jquery Tab that is loaded through AJAX. When I open the page in a browser it shows fine but in AJAX case it is a just displayed inside the tab as a pure table. Is there something I am doing wrong or there is no possibility to do that? Thank you for responses.

As requested, here is the code. Loading libraries and CSS, convert unordered list to tabs

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

Actual tabs

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

Then, picklist.php file that is loaded through AJAX. I will skip the code, just w=show the actual output

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

If I navigate to the page directly - it is fine. If I load it in a tab then it is just plain table

Answer 1

The problem is when you fire $('#rows').dataTable();

You try to do it in $(document).ready but that's already come on gone by the time your ajax fires off. What you probably need to do is put $('#rows').dataTable(); in the callback for the when tab is redrawn after the ajax.

If its not working in load, then use a setTimeout to invoke it a second later and see what happens. If it's still not working then put it in the success callback of your ajax options and use the setTimeout trick again.