如何在每个 Datatable 行中有一个下拉列表？

Question

Currently I successfully appear a dropdown result outside the datatable but how to move the dropdown into each of the datatable row? In my case inside Service Catalogue column. I have searching everywhere but not meet as what I want. The current dropdown that outside datatable should not be appear.

HTML

<table id="bindNewServiceTable">
    <thead>
        <tr>
            <th class="text-center">Admin Status</th>
            <th class="text-center">Operate Status</th>
            <th class="text-center">Service Catalogue</th>
            <th class="text-center">Action</th>
        </tr>
    </thead>
</table>

<select id="dropdown">
    <option></option>
</select>

JS

$('#bindNewServiceTable').DataTable({
    ajax: {
        url: url_bind,
        crossDomain : true,
        type : "POST",
        cache : false,
        dataType : "json",
        contentType: "application/json",
        dataSrc : "service"
    },
    columns: [
        { data : "admin_status" },
        { data : "operate_status" },
        { data : "id", "className": "text-center",
            render: function(data){
                return createSelect(data);
            }
        },
        { data : "example" },
    ],
});

function createSelect(id){

    $.ajax ({
        url: url_list_cat,
        type : 'POST',
        dataType : 'json',
        data: id,
        cache: false,
        contentType: "application/json",
        processData: true,
        timeout: 10000,
        success: function(response){
            for (var i = 0; i < response.category.length; i++) {
                $("#dropdown").append($("<option>", {
                    response: response.category[i].name,
                    text: response.category[i].name
                }));
            }
        }
    });
}

Answer 1

You need to return the actual string with the HTML that you want inside the datatable field.

So instead of trying to populate the div with id="dropdown" you would have to do something like this:

function createSelect(id){
    $.ajax ({
        url: url_list_cat,
        type : 'POST',
        dataType : 'json',
        data: id,
        cache: false,
        contentType: "application/json",
        processData: true,
        timeout: 10000,
        success: function(response){
            var select = "<select id='dropdown'>";
            for (var i = 0; i < response.category.length; i++) {
                var val = response.category[i].name
                select += "<option value='" + val + "'>" + response.category[i].name + "</option>";
            }
            select += "</select>"
            return select;
        }
    });
}

Answer 2

You may want to try this and adjust it to fit your need

$('#bindNewServiceTable').DataTable({
    ajax: {
        url: url_bind,
        crossDomain : true,
        type : "POST",
        cache : false,
        dataType : "json",
        contentType: "application/json",
        dataSrc : "service"
    },
    columns: [
        { data : "admin_status" },
        { data : "operate_status" },
        { data : "id", "className": "text-center",
            render: function(data){
                return createSelect(data);
            }
        },
        { data : "example" },
    ],
});

function createSelect(id){

   return  $.ajax ({
        url: url_list_cat,
        type : 'POST',
        dataType : 'json',
        data: id,
        cache: false,
        contentType: "application/json",
        processData: true,
        timeout: 10000,
        success: function(response){
        var $select = $("<select></select>", {
                        "id": id,
                       "value": value  //set you select value from response
                    });
            $.each(response, function(key,value){
                        var $option = $("<option></option>", {
                            "text": value.name,
                            "value": value.name
                        });
                        if(value === value.name){.  //compare the value from select with option selected
                            $option.attr("selected", "selected")
                        }
                        $select.append($option);
                    });
                    return $select.prop("outerHTML");
        }
    });
}