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=実際の出力を表示します。

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

したがって、基本的に2つのdataTableが存在して異なるタブで機能することはできないため、すべてを機能させるには、古いdataTablesインスタンスを破棄する必要があります

于 2012-05-15T15:52:21.823 に答える
0

問題はあなたが発砲するときです $('#rows').dataTable();

あなたはそれをやろうとしますが、それは$(document).readyあなたのajaxが発火する時までにすでに起こっています。おそらくあなたがする必要がある$('#rows').dataTable();のは、ajaxの後にタブが再描画されるときのコールバックに入れられることです。

ロード時に機能しない場合は、setTimeoutを使用して1秒後に呼び出し、何が起こるかを確認します。それでも機能しない場合は、ajaxオプションの成功コールバックに入れて、setTimeoutトリックを再度使用します。

于 2012-04-18T21:30:31.253 に答える