How to Move DataTable Search Filter to a Different Row with jQuery ?

Last Updated : 20 Feb, 2024

We Move the DataTable Search Filter to a Different Row with jQuery. To achieve this functionality, you must know what is a Search filter and where we can use it, a search filter typically refers to a mechanism used to filter and display specific elements from a set of elements based on certain criteria.

This is often used in scenarios where you have a list of items and you want to narrow down the list based on user input or predefined conditions.

Preview Image:

Output

Approach

Create a HTML table template and provide a id in a <tbody> tag. Add a jQuery CDN link.
Then write a code for waits for the document to be ready before executing the code inside the function.
After that create a event listener which listens for the keyup event, which occurs when a key is released after being pressed down, inside the input field with id of the <tbody> tag.
Then fetch the value which the user type in the textbox and convert it to lowecase.
And also convert the current <tr> value in the lower case.
Then if the match is found then show it , Otherwise show the message like “No matching records found”.

Example: This example shows the implementation of the above-explained appraoch.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <style>
        #customers {
            font-family: Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
 
        #customers td,
        #customers th {
            border: 1px solid #ddd;
            padding: 8px;
        }
 
        #customers tr:nth-child(even) {
            background-color: #dbe0de;
        }
 
        #customers tr:hover {
            background-color: #ddd;
        }
 
        #customers th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #0ef61a;
            color: white;
        }
 
        #searchRow {
            margin-bottom: 1rem;
        }
 
        #noMatch {
            color: red;
            display: none;
        }
    </style>
</head>
 
<body>
 
    <h1>How to Move DataTable Search Filter
        to a Different Row with jQuery</h1>
 
    <div id="searchRow">
        <input type="text" id="myInput" placeholder="Search...">
    </div>
    <p id="noMatch">No matching records found.</p>
 
    <table id="customers">
        <thead>
            <tr>
                <th>Company</th>
                <th>Contact No</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody id="myTable">
            <tr>
                <td>Emp 1</td>
                <td>8027801264</td>
                <td>Germany</td>
            </tr>
            <tr>
                <td>Emp 2</td>
                <td>8027801265</td>
                <td>Sweden</td>
            </tr>
            <tr>
                <td>Emp 3</td>
                <td>8027801266</td>
                <td>Mexico</td>
            </tr>
            <tr>
                <td>Emp 4</td>
                <td>8027801267</td>
                <td>Austria</td>
            </tr>
            <tr>
                <td>Emp 5</td>
                <td>8027801268</td>
                <td>UK</td>
            </tr>
            <tr>
                <td>Emp 6</td>
                <td>8027801269</td>
                <td>Germany</td>
            </tr>
            <tr>
                <td>Emp 7</td>
                <td>8027801270</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Emp 8</td>
                <td>8027801271</td>
                <td>Italy</td>
            </tr>
            <tr>
                <td>Emp 9</td>
                <td>8027801272</td>
                <td>UK</td>
            </tr>
            <tr>
                <td>Emp 10</td>
                <td>8027801273</td>
                <td>France</td>
            </tr>
        </tbody>
    </table>
 
 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myInput").on("keyup", function () {
                let value = $(this).val().toLowerCase();
                let matched = false;
                $("#myTable tr").each(function () {
                    let rowText = $(this).text().toLowerCase();
                    if (rowText.includes(value)) {
                        $(this).show();
                        matched = true;
                    } else {
                        $(this).hide();
                    }
                });
                if (!matched) {
                    $("#noMatch").show();
                } else {
                    $("#noMatch").hide();
                }
            });
        });
    </script>
</body>
 
</html>