2

私が作成している Web サイト全体でフッタブル テーブルを使用していますが、これまでは主に順風満帆でしたが、サーバー側のページングをテーブルに追加すると行き詰まりました。基本的に、私は ajax 呼び出しを介してデータを取得しています。ページが最初に読み込まれると、すべてが正常に表示され、モバイル ビューでは列が折りたたまれますが、次のページ ボタンを押すと新しいデータがテーブルに追加されますが、モバイル ビューでは列は折りたたまれません。下の画像を参照してください。

ここに画像の説明を入力

わかりやすくするために、この Web ページには複数のフッタブル テーブルがあります。上のテーブルは、jquery.responsiveTabs プラグインを使用してタブ コントロール内に実装されています。ブラウザーを最大化してから最小化すると、フッタブル ブレークポイントが新しい行に追加され、列が折りたたまれます。

テーブルに新しい行を追加するときは、高度なデモ機能で提供されている ajax デモを使用しています。

私のajaxリクエストの実装は次のとおりです。

$.ajax({
    url: '/myurl/getdata/',
    success : function(data) {
        $('#despatchTbl tbody').append(data).trigger('footable_redraw');
    }
});

これは、要素ではなく ID でテーブルを参照することを除けば、フッタブル ドキュメントのコードと同じです。また、footable_resize、footable_initialize、およびタブ footable_force_resize を交換するときの同様の問題を修正するために追加した新しいトリガーなど、他のフッタブル トリガーも試しましたが、まったく運がなく、コンソールにもエラーはありません。

私のスクリプトは次の順序で宣言されています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="/scripts/footable.js" type="text/javascript"></script>
<script src="/scripts/jquery.responsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/ajaxlibs.js"></script>

スクリプト宣言のすぐ下で、次のようにフッタブルを初期化しています。

<script language="javascript">
    $(function() {
       $('.footable').footable()
    }); 
</script>

また、タブを変更するたびに発生するタブのアクティブ化イベントに成功して追加した次のことも試しました。

var table = $('.footable').footable();
table.trigger('footable_resize');

ただし、ページが初期化された後に ajax 呼び出しの後にこれを実行すると、コンソールに次のエラーが表示されます。

typeerror $(...).footable は関数ではありません

私は今これで機知に富んでおり、この後半の段階でフッタブルを捨てて代替品を見つける必要は本当にありません. 私はこことグーグルでさまざまな質問を調べましたが、私の問題に対する解決策はありませんので、どんな助けも大歓迎です!!!

4

1 に答える 1