DataTable with dropdown Column

by Madalina Taina

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<table id="example">
    <thead>
        <tr>
            <th>Day</th>
            <th>Start</th>
            <th>End</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Monday</td>            
            <td>8:00 am</td>            
            <td>8:00 pm</td>            
        </tr>
        <tr>
            <td>Tuesday</td>            
            <td>7:00 am</td>            
            <td>9:00 pm</td>            
        </tr>
        <tr>
            <td>Wednesday</td>            
            <td>8:00 am</td>            
            <td>6:00 pm</td>            
        </tr>
        <tr>
            <td>Thursday</td>            
            <td>11:00 am</td>            
            <td>7:00 pm</td>            
        </tr>
        <tr>
            <td>Friday</td>            
            <td>6:00 am</td>            
            <td>1:00 pm</td>            
        </tr>
    </tbody>
</table>

JavaScript

var times = [
	"12:00 am", 
	"1:00 am", 
	"2:00 am", 
	"3:00 am", 
	"4:00 am", 
	"5:00 am", 
	"6:00 am", 
	"7:00 am", 
	"8:00 am", 
	"9:00 am", 
	"10:00 am", 
	"11:00 am", 
	"12:00 pm", 
	"1:00 pm", 
	"2:00 pm", 
	"3:00 pm", 
	"4:00 pm", 
	"5:00 pm", 
	"6:00 pm", 
	"7:00 pm", 
	"8:00 pm", 
	"9:00 pm", 
	"10:00 pm", 
	"11:00 pm"
];

$(function(){
	$("#example").DataTable({
    	"columns":[
        	null,
        	{
            	"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");
                }
            },
            {
            	"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");
                }
            }
        ]
    });
});