columns.data not appending into select field

Muhammad Izzat

Hello everyone, I'm having issue appending my column data into my select field, I'm populating my data using REST API btw. can anyone point me to the right direction, it'll would be much appreciated thanks.

below is my code :

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>

Javescript :

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>' )
            } );
        } );
    }
});