Question

我想在我的数据表的列中添加一个下拉列表。我正在用我的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'）内附加标签，但这似乎无济于事。有人可以帮助我吗？

Answer 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: []
    });

});

Answer 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>

如何在datatable列中创建一个下拉列表？

2 个答案: