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

Question

目前我成功地在数据表之外出现了一个下拉结果，但是如何将下拉列表移动到每个数据表行中？在我的情况下，在服务目录列中。我到处寻找，但没有达到我想要的。当前不应该出现外部数据表的下拉菜单。

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

您需要在数据表字段中返回带有所需 HTML 的实际字符串。

因此，与其尝试用id="dropdown" 填充div，不如这样做：

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

你可能想试试这个并调整它以满足你的需要

$('#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");
        }
    });
}