3

AngularJS Utils ページネーション ディレクティブとフィラメントグループ テーブルソー レスポンシブ テーブル ライブラリを組み合わせて使用​​し、(右にスワイプして) レスポンシブなページ分割されたテーブルを取得しようとしています。

テーブルにデータを入力したら、responsive-table という別のディレクティブ内からテーブルソーの「refresh」イベントを呼び出します。これにより、テーブルが完全にレスポンシブになり、すべてがうまくいきます。

$("tableselector").table("refresh")

ただし、ページを変更すると (したがって、テーブル内の行が変更されると)、テーブルは応答しなくなります (HTML を調べると、新しい行には「tr」要素に関連するテーブルソー クラスがないことがわかりますが、 「th」要素はまだそうです）。

私はこれを予想して、もう一度 refresh イベントを呼び出そうとしましたが、うまくいきませんでした。

以下は参考のための私のHTMLです。

<table class="table table--stripe" data-mode="swipe" responsive-table>
  <thead>
    <tr>
      <th>Email</th>
      <th>Name</th>
      <th>User role</th>
      <th></th>
    </tr>
  </thead>

  <tbody>

    <tr dir-paginate="user in Model.Users | itemsPerPage:Model.PageSize" current-page="Model.CurrentPage">
      <td>{{user.Email}}</td>
      <td>{{user.DisplayName}}</td>
      <td>{{user.Role}}</td>
      <td>{{user.Telephone}}</td>
    </tr>
  </tbody>
</table>

テーブルソーのコードが「間違っている」と思われる場所を大まかに見つけました（ただし、これは私の理解不足であると思われます）

 $.fn[pluginName] = function ()
    {
        return this.each(function ()
        {
            var $t = $(this);

            if ($t.data(pluginName))
            {
                return;
            }

            var table = new Table(this);
            $t.data(pluginName, table);
        });
    };

多くのテーブルソー コードを調べた後、新しい行が挿入され、refresh、destroy、さらには create イベントが呼び出された後、上記のコードは常に return ステートメントを介して終了することがわかりました。

他の誰かがこれらの問題を抱えていましたか、またはいずれかのライブラリを誤って使用して応答テーブルを更新/破棄/再作成したかどうかを知っていますか?

4

2 に答える 2

5

そのため、 https://github.com/zachleatによって GitHub で正しい方向に親切に指摘されました。

ユーザーがクリックして次のページ分割されたページに移動した後にテーブルを更新するコード行を少し変更する必要がありました。

$('#mytable').table().data("table").refresh()
于 2015-01-29T07:59:34.237 に答える