Search in all fields in DataTable
If you are using the DataTable Javascript library and are having trouble searching in all fields of the dataset except for the only one visible, then I will show you, how you can search in all fields of the DataTable.
By default, DataTable searches in all fields only on those fields that are visible on the table. Let’s say you have a dataset containing “name”, “designation”, and “country” fields. But you are displaying only “name”, and “designation” on the table.
<?php
$data = [
[ "name" => "Adnan", "designation" => "Software Engineer", "country" => "Pakistan" ],
[ "name" => "John", "designation" => "Web Designer", "country" => "USA" ],
[ "name" => "Burak", "designation" => "Cloud Engineer", "country" => "Turkey" ],
[ "name" => "Sachin", "designation" => "Mobile Engineer", "country" => "India" ],
];
?>
<table id="example" class="display" style="width: 100%;">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
</tr>
</thead>
<tbody>
<?php foreach ($data as $d): ?>
<tr>
<td>
<?php echo $d["name"]; ?>
</td>
<td>
<?php echo $d["designation"]; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script>
new DataTable('#example')
</script>Right now, you will be able to search by name and designation only because only these two are visible on the table.
But what if you want to search for country as well ?
You just need to create a hidden <div> element and render the complete dataset in it using json_encode PHP function.
<?php
$data = [
[ "name" => "Adnan", "designation" => "Software Engineer", "country" => "Pakistan" ],
[ "name" => "John", "designation" => "Web Designer", "country" => "USA" ],
[ "name" => "Burak", "designation" => "Cloud Engineer", "country" => "Turkey" ],
[ "name" => "Sachin", "designation" => "Mobile Engineer", "country" => "India" ],
];
?>
<table id="example" class="display" style="width: 100%;">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
</tr>
</thead>
<tbody>
<?php foreach ($data as $d): ?>
<tr>
<td>
<div style="display: none;">
<?php echo json_encode($d); ?>
</div>
<?php echo $d["name"]; ?>
</td>
<td>
<?php echo $d["designation"]; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script>
new DataTable('#example')
</script>If you are trying to search the country, you will be able to see the records of that country, despite the country is not visible in that table.
That’s how you can search in all fields of the DataTable, despite the fact if they are visible or not.
