2017-02-24 15 views
0

row.add()メソッドを使用してjQueryデータテーブルに新しい行を動的に追加しています。私は角度jsを使用して、APIからデータを取得し、新しい行としてテーブルに追加しています。以下は私のテーブルの行の構造です。jQuery DataTables row.add()メソッドでハイパーリンクを追加

<tr ng-repeat="datum in userData"> 
       <td>{{datum.no}}</td> 
       <td><a href="/Public/User/{{datum.subId}}">{{datum.fullName}}</a></td> 
       <td>{{datum.productsIntoAccount}}</td> 
       <td>{{datum.state}}</td> 
       <td>{{datum.country}}</td> 
</tr> 

動的に行を追加するコードは次のとおりです。

datatable = $("#data-table").DataTable({ 
         "responsive": true, 
         "paging": false 

}); 
var data = response.data; 
       for (var i = 0; i < data.length; i++) { 
        datatable.row.add([ 
         data[i].no, 
         data[i].fullName, 
         data[i].productsIntoAccount, 
         data[i].state, 
         data[i].country, 
         data[i].subId 
        ]).draw(false); 
} 

あなたはfullNameがHREFでそれを追加するためのAPIデータからsubIdを取るハイパーリンクで、テーブルの行構造で見ることができるように。私の質問は、テーブルデータにrow.add()メソッドを使ってハイパーリンクを追加する方法です。

答えて

0

編集:コメント欄に記載されている提案に基づいて、私は答えを簡略化しました。

var data = response.data; 
       for (var i = 0; i < data.length; i++) { 
        datatable.row.add([ 
         data[i].no, 
         '<a href="/Public/User/' + data[i].subId + '">' + data[i].fullName + '</a>', 
         data[i].productsIntoAccount, 
         data[i].state, 
         data[i].country 
        ]).draw(false); 
       } 
+1

これは正しい方法ではありません。 'row.add()'にHTMLの文字列を使用するか、 'columns.render'オプションを使用して行データに基づいてセルの内容を生成することができます。 –

+0

htmlの文字列は簡単に実装できるようです。私はそれを実装し、私は答えを更新します。 –

+0

文字列の場合、 'fullName'と' subId'に '<' or '>'のようなHTML特殊文字をエスケープするのに注意する必要があります。 –

関連する問題