Odd Behavior Of Datatables.search Function After Modifying It
This question is a follow-up to this question. I've created this JSFiddle for demonstration purposes. Note that when searching for a value in column1 the search works as expected.
Solution 1:
A simpler way of doing it using the html-input type is as below. You define the columns you're targeting and you're returning the value upon search. It works for both the select and the input.
You won't need to check for keyup.DT cut.DT paste.DT input.DT search.DT as datatables does that for you automatically as well.
$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
return $(value).val();
};
var data_table = $("#table").DataTable({
columnDefs: [{
"type": "html-input",
"targets": [0, 1]
}]
});<html>
<body>
<table id="table">
<thead>
<th>column1</th>
<th>column2</th>
</thead>
<tbody>
<tr>
<td>
<select class="approver-select">
<option selected>user1</option>
<option>user2</option>
</select>
</td>
<td>
<input class="network-or-group-text" type="text" value="1.1.1.1/32">
</td>
</tr>
<tr>
<td>
<select class="approver-select">
<option>user1</option>
<option selected>user2</option>
</select>
</td>
<td>
<input class="network-or-group-text" type="text" value="2.2.2.0/24">
</td>
</tr>
</tbody>
</table>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</html>This is cleaner and uses the basic type property of datatables rather than filtering all data upon search as you're doing right now.
Post a Comment for "Odd Behavior Of Datatables.search Function After Modifying It"