8

サーバーにajaxリクエストを送信するページがあります。ページにはいくつかのデータを表示する表があります。サーバーは、オブジェクトのリストであるjsonオブジェクトを返しますが、ページのレイアウトは含まれていません。

返されたjsonによってテーブル行のみを更新したい。サードパーティのライブラリを使用せず、jqueryのみを使用してこれを行うにはどうすればよいですか？大まかなアイデアと例が欲しいだけです。

4

3 に答える 3

18

これがデモフィドルです。(簡易バージョン)
NEW:更新されたフィドル(上級バージョン)を参照してください。

この JSON データを取得したとします。 

var jsonData = [
    { field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' },
    { field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' },
    { field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' }
];

そして、あなたはこのテーブルを持っています: 

<table id="data-table">
    <tr><td>There are no items...</td></tr>
</table>

ここで、カスタマイズ可能な順序と存在で値を解析できるメソッドが必要です。たとえば、フィールド配列をパーサー関数に渡すことができるとします。フィールドの順序を設定し、必要に応じて 1 つまたは 2 つのフィールドを除外できます。

loadTable('data-table', ['field1', 'field2', 'field3'], jsonData);

field4は解析されないことに注意してください。

このloadTable関数は、返された配列の項目をループし、 a<tr>内の各フィールド値でを作成します<td>。簡単な関数は次のとおりです。

function loadTable(tableId, fields, data) {
    //$('#' + tableId).empty(); //not really necessary
    var rows = '';
    $.each(data, function(index, item) {
        var row = '<tr>';
        $.each(fields, function(index, field) {
            row += '<td>' + item[field+''] + '</td>';
        });
        rows += row + '<tr>';
    });
    $('#' + tableId).html(rows);
}

アップデート：

次のサポートが追加されました。

  • テーブル ヘッダー
  • デフォルトのテキスト (空のリストの場合)
  • リストの追加
  • テーブルのクリア
  • 等...

空のテーブルを含めるだけdynamicTableで、あとは が処理してくれます。

<table id="data-table"></table>

dynamicTable.config()メソッドを 呼び出して、テーブルを構成します。

var dt = dynamicTable.config('data-table', //id of the table
                             ['field2', 'field1', 'field3'], //field names
                             ['header 1', 'header 2', 'header 3'], //set to null for field names to be used as header names instead of custom headers
                             'There are no items to list...'); //default text for no items

次にdt.load(data);、新しいデータをロードするために呼び出します (以前のリストがあればそれを削除します)。または、以前のリストの最後に新しいデータを追加するために
呼び出します。dt.load(data, true);

メソッドを呼び出すdt.clear();と、リスト全体がクリアされます。

ここでフィドルを更新しました。

于 2013-02-19T03:52:07.420 に答える
1

JSONオブジェクトを反復処理できます。

$.each(JSON_Object, function(key, value) {
    // Write your code here
});

次に、テーブルにデータを追加するだけです。

$('#yourTableName tr:last').after('<tr><td>John</td><td>$500</td></tr>');

サードパーティのライブラリは必要ないと具体的に述べたので、上記のようなことができます。ただし、すべての機能を備えたデータセットが必要な場合は、http：//datatables.net/などのプラグインを検討できます。

于 2013-02-19T03:39:48.290 に答える