[英]How to have a dropdown in each of Datatable row?
目前我成功地在数据表之外出现了一个下拉结果,但是如何将下拉列表移动到每个数据表行中? 在我的情况下,在服务目录列中。 我到处寻找,但没有达到我想要的。 不应出现外部数据表的当前下拉列表。
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
}));
}
}
});
}
您需要在数据表字段中返回带有 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;
}
});
}
您可能想尝试一下并调整它以满足您的需要
$('#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");
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.