带有下拉列的数据表 [英] DataTable with dropdown Column

问题描述

我需要将下拉列表作为 DataTable jQuery 中的列，它现在如下所示

I need to make dropdown as column in DataTable jQuery it is lookinng like as below right now

我想要它像下面的图片

我使用的代码是

<table id="example" class="hover row-border dataTable" role="grid" width="100%">
    <thead class="dataTableHeader">
        <tr>
            <th>Days</th>
            <th>Start Time</th>
            <th>End Time</th>
        </tr>
    </thead>
</table>

$(document).ready(function () {
    $('#example').DataTable({
        "aaData": OrganizationData.OrganizationPreference.ScheduleDaysCol,
        "columns": [
            {"data": "DayName"},
            {"data": "StartDateHour"},
            {"data": "EndDateHour"}

        ],
        "paging": false,
        "ordering": false,
        "info": false,
        "filter": false
    });
});

推荐答案

另一种方法是使用 render 方法:

Another way would be to use the render method:

        "render": function(d,t,r){
            var $select = $("<select></select>", {
                "id": r[0]+"start",
                "value": d
            });
            $.each(times, function(k,v){
                var $option = $("<option></option>", {
                    "text": v,
                    "value": v
                });
                if(d === v){
                    $option.attr("selected", "selected")
                }
                $select.append($option);
            });
            return $select.prop("outerHTML");
        }

工作示例.

这篇关于带有下拉列的数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！