How to search the datatable if one column has dropdown control with selected value
How to search the datatable if one column has dropdown control with selected value
asyncsaroj
Posts: 2Questions: 1Answers: 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example">
<thead>
<tr>
<th>Day</th>
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>January</td>
<td>2001</td>
</tr>
<tr>
<td>Tuesday</td>
<td>February</td>
<td>2002</td>
</tr>
<tr>
<td>Wednesday</td>
<td>March</td>
<td>2003</td>
</tr>
<tr>
<td>Thursday</td>
<td>April</td>
<td>2004</td>
</tr>
<tr>
<td>Friday</td>
<td>May</td>
<td>2005</td>
</tr>
</tbody>
</table>
<script>
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"
];
var months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
var year = [
"2001",
"2002",
"2003",
"2004",
"2005",
"2006",
"2007",
"2008",
"2009",
"2010",
"2011",
"2012",
];
$(function () {
$("#example").DataTable({
"columns": [
null,
{
"render": function (d, t, r) {
var $select = $("<select></select>", {
"id": r[0] + "start",
"value": d
});
$.each(months, 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(year, 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");
}
}
]
});
});
</script>
</body>
</html>
This discussion has been closed.
Answers
Hi asyncsaroj,
I'm afraid that at the moment DataTables does not support this using the API or otherwise. It is however possible to accomplish this by writing your own function. You would need to define your own search box too.
You can find some details on writing a custom filtering function here.
Thanks,
Sandy
Thanks Sandy,
I will write my own custom function for this.
Thanks,
Saroj