10

dynatable を試していますが、問題が発生しています。異なる json ファイルからレコードを更新する方法がわかりません。

私のHTML本文：

<input type="button" value="items a" id="setToItemsA"><br>
<input type="button" value="items b" id="setToItemsB"><br>
<br><br>
<table id="my-final-table">
    <thead>
        <th>Band</th>
        <th>Song</th>
    </thead>
    <tbody>
    </tbody>
</table>

私のスクリプト

$(document).ready(function() {
    var json1 = [
                  {
                    "band": "Weezer",
                    "song": "El Scorcho"
                  },
                  {
                    "band": "Chevelle",
                    "song": "Family System"
                  }
                ];

    var json2 = [
                  {
                    "band": "Band1",
                    "song": "Song1"
                  },
                  {
                    "band": "Band2",
                    "song": "Song2"
                  }
                ];

    $('#my-final-table').dynatable({
      dataset: {
        records: json1
      }
    });

    $('#setToItemsA').click(
        function() {
            setToItems(json1);
        });
    $('#setToItemsB').click(
        function() {
            setToItems(json2);
        });

    function setToItems (argument) {
        console.log(argument);
        $('#my-final-table').dynatable({
          dataset: {
            records: argument
          }
        });
    }
});

テーブルのバインドを解除して、新しいデータセットでやり直そうとしましたが、うまくいきませんでした。正直なところわかりません。ご協力いただきありがとうございます！

4

1 に答える 1

16

この Github issueの関連する議論を参照してください。setToItems短いバージョンは、関数を更新して、

  1. dynatable インスタンスの元のレコード セットを置き換えます。
  2. process()dynatable インスタンスの関数を呼び出します。

setToItemsこれを行うには、最初に dynatable をインスタンス化するときに最初に dynatable インスタンス オブジェクトをキャッシュしましょう (関数が呼び出されるたびにロードし続ける必要がないように:

var dynatable = $('#my-final-table').dynatable({
  dataset: {
    records: json1
  }
}).data('dynatable');

それでは、関数を更新しましょう。

function setToItems (argument) {
  console.log(argument);
  dynatable.settings.dataset.originalRecords = argument;
  dynatable.process();
}

上記では、originalRecords必要な任意の JSON コレクションに を設定できます。しかし、dynatable は を呼び出すまで DOM のテーブルを更新しませんprocess()。これにより、フィルターの追加、ページの変更、並べ替えの追加など、必要に応じて複数の操作を一度に行うことができます。指示しない限り、個々の変更ごとに DOM 更新をトリガーする必要はありません。

于 2014-01-04T09:25:21.500 に答える