javascript - 在数据表中添加 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();
});