datatablesにhtmlマークアップを追加する行を追加する

Question

データテーブルに動的にaddrowを実装したいが、何とかして新しく追加された行の中にhtmlマークアップを追加してデータを表示しないようにする。私はバイオリンでそれをしようとしたときに追加

これが私のjsで、

$('#productselect').each(function(index, value){ 
     var initSelectpicker = $(this).selectpicker(); 
     $.getJSON('../../../html/data/productlist.php', function(data){ 

      initSelectpicker.html(''); 
      $.each(data, function(key, val){ 
       initSelectpicker.append('<option value="' + val["prod_desc"] + '">'+ val["prod_desc"] + '</option>'); 
      }); 
      initSelectpicker.selectpicker('refresh'); 
     }); 
    }); //end flightselect 
$(document).ready(function() { 
    var t = $('#example').DataTable(); 
    var counter = 1; 

    $('#addRow').on('click', function() { 
     t.row.add([ 
      counter +'.1', 
      "<select class='form-control' id='productselect' data-live-search='true'>", 
      counter +'.3', 
      counter +'.4', 
      counter +'.5' 
     ]).draw(false); 

     counter++; 
    }); 

    // Automatically add a first row of data 
    $('#addRow').click(); 
}); 

Answer 1

スクリプトの最初の部分は、ページが最初に読み込まれたときにのみ呼び出されます。そのため、選択フィールドにはproductlist.phpというオプションが設定されています。

したがって、さらに行を追加しようとすると、新しい選択フィールドにはオプションがありません。新しい行を追加しようとすると、productlist.phpに電話をかけることができます。

$(document).ready(function() { 

    var t = $('#example').DataTable(); 
    var counter = 1; 

    $(document).on('click', '#addRow', function() { 

     /*** GET ALL OPTIONS ***/ 
     $.getJSON('../../../html/data/productlist.php', function(data){ 
      var newoptions = ''; 
      $.each(data, function(key, val){ 
       newoptions .= '<option value="' + val["prod_desc"] + '">'+ val["prod_desc"] + '</option>'; 
      }); 
     }); 

     t.row.add([ 
      counter +'.1', 
      '<select class="form-control" id="productselect" data-live-search="true">'+newoptions+'</select>', 
      counter +'.3', 
      counter +'.4', 
      counter +'.5' 
     ]).draw(false); 

     counter++; 
    }); 

    // Automatically add a first row of data 
    $('#addRow').click(); 
}); 

Answer 2

行が正常に動作します。

あなたは「なぜ新しい行の<select>にオプションがないのですか」と思われるようです。

コンテンツを追加するためのコードは、行を追加した後に呼び出されません。ページがレンダリングされると、ページ上の#productselectすべてにオプションが追加されますが、そのコントロールはまだ存在しません。選択項目を追加した後にのみオプションを追加するようにコードを呼び出す必要があります。

セレクトコントロールにはidという属性があり、ユーザーが複数の行を入力すると、同じidの要素を複数含むドキュメントが作成されるため、問題は起こります-no。