jquery/javascriptを使用して動的にテーブルを構築しています。json/jquery を使用してテーブル本体を動的に生成するためのリンクがいくつかあります。
jquery データテーブルを動的に作成されたテーブルと統合するのが好きです。.dataTable()動的に作成された行にどのようにアタッチできますか。
document.ready で使用しようとすると、テーブルは最初に作成されたテーブルの値を保持します。
私のJavaScriptは次のようになります：
function GetProducts(Id) {
$('#tProductListBody').html('');
$.getJSON("/Product/GetProducts/?t=" + new Date(), { catId: Id },
function(data) {
var _productsBodyHtml = '';
if (data != null && data != false) {
for (i in data) {
var _product = data[i];
_productsBodyHtml += '<tr><td>' + _product.ProductName + '</td>';
_productsBodyHtml += '<td>' + _product.QuantityInHand + '</td><td>' + _product.Price + '</td></tr>';
}
}
$('#tProductListBody').html(_productsBodyHtml);
$('#tProductList').dataTable();
});
}
上記の js 関数を使用すると、リンクをクリックするたびにデータテーブルが追加されます。
dataTable()は、html テーブルにソート、ページング、および検索機能を提供する jquery プラグインです。プラグインは、検索用のテキスト ボックスとページング用のページャーを動的に追加します。
私が直面している問題は、リンクの 1 つをクリックすると、テーブルが動的にdataTable()作成され、別のテキスト ボックスとページャーが再び追加され、検索とページングで以前に作成された結果が得られることです。これを回避する必要があるだけでなく、dataTable()機能は最新の動的テーブルのコンテンツに対しても機能するはずです
データテーブルが複数回追加されず、最新の動的テーブルが適用されるように、このjs関数をどのように言い換えることができますか?