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

问题描述

我需要将DataTable中的列作为下拉列表，现在它的外观如下

以及我使用的代码是

 < table id =exampleclass =hover row-border dataTablerole =gridwidth =100％> 
< thead class =dataTableHeader> 
< tr> 
天< / th> 
< th>开始时间< th> 
 th End Time< / th> 
< / tr> 
< / thead> 
< / table> 
 $ b $（document）.ready（function（）{
 $（'＃example'）。DataTable（{
aaData：OrganizationData.OrganizationPreference.ScheduleDaysCol，
列：[
 {data：DayName}，
 {data：StartDateHour}，
 {data：EndDateHour} 
 $ b，
paging：false，
ordered：false，
info：false，
filter：false 
}）; 
}）; 
  

解决方案

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



 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 
value：v 
}）; 
 if（d === v）{
 $ option.attr（selected，selected）
 } 
 $ select.append（$ option）; 
}）; 
返回$ select.prop（outerHTML）; 
} 
  

工作示例。

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

And I want it like the below image

and the code which I use is

<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
    });
});

解决方案

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");
        }

Working example.

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