如何在数据表列中创建下拉列表？答案

【问题标题】：How to create a dropdown in datatable column?如何在数据表列中创建下拉列表？
【发布时间】：2019-01-09 13:25:51
【问题描述】：

我想在我的数据表的列中有一个下拉菜单。我正在用 json 数据填充我的数据表，我有 json 对象和一个包含所有这些 json 对象的数组。

html:

<table id="orderDescriptionTable" class="table table-bordered">
   <thead>
     <tr>
        <th> Sr.no. </th>
        <th> Item </th>
        <th> Status </th>
     </tr>
  </thead>
  <tbody></tbody>
</table>

javascript/jquery:

var obj1 = {
    srNo : "12",
    item: "Notebook",
    status: '<select id="status-1" class="status"></select>'
};
var obj2 = {
    srNo : "15",
    item: "Notebook",
    status: '<select id="status-2" class="status"></select>'
};
var dataSet = [];

$('#orderDescriptionTable').DataTable({
    data: dataSet,
    columns: [{
        "data": function(data) {
             return data.srNo;
        }
    }, {
        "data": function(data) {
             return data.item;
        }
    },  {
        "data": function(data) {
            return data.status;
        }
    }
    ]
});

我想在表格的“状态”列中有下拉菜单。我试图在 $('.status') 中附加标签，但这似乎没有帮助。有人可以帮帮我吗？

【问题讨论】：

标签： jquery html datatables frontend

【解决方案1】：

这是一个简单的数据表，其中有一列（填充了一些垃圾数据），显示了一个列中呈现的选择列表：

html 标记：

<body>
    <table class="display" id="exampleTable" width="60%">
        <thead>
            <tr>
                <th>Select List Col</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>

数据表：

jQuery(function($) {

var testData = [
    ["test1", "test", "1"],
    ["test2", "test", "2"],
    ["test3", "test", "3"],
    ["test4", "test", "4"]
  ]

$('#exampleTable').DataTable({
      retrieve: true,
      paging: false,
      data : testData,
      columns: [ {
        "title": "Select List Col",
        "render": function(data, type, row, meta) {
          var a = testData.indexOf(row);
       var select = $("<select id='role_"+a+"'><option value ='1'>Option 1</option><option value ='2'>Option 2</option</select>");

       $("#role_"+a).val(row[1]);

       return select.prop("outerHTML")
        }
      } ],
      order: []
    });

});

【讨论】：

【解决方案2】：

我希望这是你需要的？

jsfiddle

<table id="orderDescriptionTable" class="table table-bordered">
   <thead>
     <tr>
        <th> Sr.no. </th>
        <th> Item </th>
        <th> 
            <span style="margin-left:25px;">Status</span> 
            <select id="status-1" class="status">
                <option value="1" class="status">1</option>
                <option value="2" class="status">2</option>
            </select> 
        </th>
     </tr>
  </thead>
  <tbody></tbody>
</table>
<script>

var dataSet = [];

$('#orderDescriptionTable').DataTable({
    data: dataSet,
    columns: [{
        "data": function(data) {
             return data.srNo;
        }
    }, {
        "data": function(data) {
             return data.item;
        }
    },  {
        "data": function(data) {
            return data.status;
        }
    }
    ]
});
$('#status-1').click(function(e){
    e.stopPropagation();
});

</script>

【讨论】：