web-dev-qa-db-ja.com

jQuery DataTables：動的に追加された各行に行IDを追加するにはどうすればよいですか？

概要

http://www.datatables.net のすばらしいdataTablesjQueryプラグインを使用しています。私のスクリプトでは、fnAddDataを使用して発生するイベントに基づいて動的に行を追加しています。 fnRowCallbackを使用して、一意の行IDを追加します。これは時々失敗し、行IDを追加しません。 46行の追加のテストでは、通常、6〜8行は行IDを取得しません。


行関数の追加

function ps_ins(row)
{
  var rowArray = row.split('|');
  row = rowArray;
  var alarmID = parseInt(row[1],10);

  $('#mimicTable').dataTable().fnAddData([
    alarmID, 'col2', 'col3', 'col4',
    'col5', 'col6', 'col7'
  ]);
}

行はテーブルに正しく追加されます。私が実行しているテストでは46行が追加され、すべて期待どおりに表示されます。


行IDを追加します

後で特定の行を変更し、fnGetRowsと.filterの組み合わせを使用してdataTableのキャッシュでその行を参照できるように、各行に一意のIDを追加しようとしています。

私は初期化段階でfnRowCallbackを使用してこれを行っています。問題に影響を与える可能性のあるものがある場合に備えて、他のすべての設定を保持しました。

  $('#mimicTable').dataTable({
    "sDom": 'lip<"mimicSpacer">f<"numUnAck">rt',
    "sScrollY": "365px",
    "aaSorting": [[4,'desc'],[5,'desc']],
    "iDisplayLength": 15,
    "aLengthMenu": [[15, 50, 100, -1], [15, 50, 100, 'All']],
    "bAutoWidth": false,
    "aoColumns": [
      null,
      { "sWidth": "20%" },
      { "sWidth": "22%" },
      { "sWidth": "9%" },
      { "sWidth": "9%" },
      { "sWidth": "20%" },
      { "sWidth": "20%" }
    ],
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull) {
      $(nRow).attr("id",'alarmNum' + aData[0]);
      return nRow;
    }
  });

DataTableオブジェクトのconsole.logは次のことを示しています。 missing row ids

ご覧のとおり、＃14には行IDと正しいrowStripeクラスがあります。 ＃15（およびそれ以降）はそうではありません。

では、行が追加されるたびにfnRowCallbackが起動しないのはなぜですか？行が追加されたときに行IDを追加するより良い方法があるかもしれませんか？

javascriptjquerydatatables
14
psynnott

解決策が見つかりました： http://www.datatables.net/forums/discussion/2119/adding-row-attributes-after-fnadddata/p1

迅速な解決策を望んでいる他の人のために、私はしました：

var addId = $('#mimicTable').dataTable().fnAddData([
  alarmID,
  'col2',
  'col3',
  'col4',
  'col5'
]);

var theNode = $('#mimicTable').dataTable().fnSettings().aoData[addId[0]].nTr;
theNode.setAttribute('id','alarmNum' + alarmID);
27
psynnott

私はこれがかなり古いスレッドであることを知っていますが、これは他の人を助けるかもしれません。データテーブル関数fnAddDataを呼び出したらすぐに、最後に追加された行にid属性を追加する最も簡単な方法は次のとおりです。

$('#table').dataTable().fnAddData( ['col1','col2','col3'] );     

$('#table tr:last').attr('id','col'+row_id);
4
user949000

これを試してみてください。

var newRow = oTable.fnAddData( [ etc..]);
var oSettings = oTable.fnSettings(); 
var nTr = oSettings.aoData[ newRow[0] ].nTr;
nTr.id = 'new id';
2
jamil

Jsbinのコードは、機能しているように見えても、予期しないことがあります。 「ブラウザ」データセットで初期化されます。その後、クリアします。次に、1行の新しいテーブルを作成します。その後、クリアします。次に、2行の新しいテーブルを作成します。その後、クリアします。次に、3行の新しいテーブルを作成します。

コードサンプルとその最終目標をよりよく理解する必要があります（そして残念ながら、今は他の場所に注意が向けられています）が、fnRowCallbackがこれを行う方法である必要があり、冗長なテーブルが多数あることに注意する必要がありますパフォーマンスに影響を与える構造と行の追加、および将来のレンダリングの変更による柔軟性。

1
Greg Pettit

新しい行を追加するときにDT_RowIdを使用し、配列の代わりにオブジェクトを使用できます。以下を参照してください。

 $('#mimicTable').dataTable().fnAddData({
            'DT_RowId': alarmID, 0:'col2', 1:'col3', 2:'col4',
            3:'col5', 4:'col6', 5:'col7'
        });
1
gurkov