数据表：将列数据追加到选择字段中的问题

Question

大家好我试图在我的数据表中添加几个coloumn select过滤器。我能够为每个列添加选择字段，但我无法将表中的数据作为选项附加到选择字段中，任何人都可以帮助我。非常感谢任何帮助。

以下是我的代码：

HTML：

<table id="project-content-datatable" class="display table table-hover table-responsive" width="100%">
    <thead>
    <tr>
        <th class="small text-muted text-uppercase"><strong>ID</strong></th>
        <th class="small text-muted text-uppercase"><strong>Preview</strong></th>
        <th class="small text-muted text-uppercase"><strong>Parent</strong></th>
        <th class="small text-muted text-uppercase"><strong>Name</strong></th>
        <th class="small text-muted text-uppercase"><strong>Description</strong></th>
        <th class="small text-muted text-uppercase"><strong>Category</strong></th>
        <th class="small text-muted text-uppercase"><strong>Creation Time</strong></th>
        <th class="small text-muted text-uppercase"><strong>Total Duration</strong></th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

javascript：

var content_table;
content_table = $('#project-content-datatable').dataTable({
    dom: 'Blfrtip',
    JQueryUI: true,
    bPaginate: false,
    sScrollX: "100%",
    scrollY: '200vh',
    scrollCollapse: true,
    paging: false,
    destroy: true,
    columnDefs: [
        {width: 1, targets: 0},
        {width: 1, targets: 1},
    ],
    responsive: false,
    select: true,
    buttons: getDataTableButtons(),
    ajax: {
        url: content_path,
        dataSrc: ''
    },
    columns: [
        {"data": "id", "class": "content_id id_padding-right ", "width": "5px"},
        {
            "data": "thumb",
            "class": "preview_padding-right ",
            "visible": false,
            "render": function (data, type, row) {
                return `<a href=` + data + ` data-fancybox> <img onerror="this.src='/media/dashboard/default/photo.png'" src=` + data + ` width="80" height="45"> </a>`;
            }
        },
        {"data": "parent", "visible": false},
        {"data": "name", "class": "content_name", "visible": true},
        {"data": "description", "class": "content_description", "visible": true},
        {
            "data": "category", "class": "", "visible": true, "render": function (data, type, row) {
            if (data != null) {
                return data.name;
            }
            else {
                return 'None';
            }
        }
        },
        {"data": "creation_time", "visible": false},
        {
            "data": null, "class": "content_duration ", "visible": true, "render": function (data, type, row) {

            // return get_duration(data);
            return 0;
        }
        }
    ]

});

$('#project-content-datatable').DataTable( {
    initComplete: function () {
        this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.header()) )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }
});