Custom Search: Single column search in jquery.dataTables.js

Javascript

<script type="text/javascript">

$(document).ready(function () {

            $('#results').DataTable({

                "lengthChange": true,

                "searching": true,

            });

            $('#results_filter').find('label').html('Name Search:  <input id="txtSearch" type="text" placeholder="" class="form-control form-control-sm" />')

            var table = $('#results').DataTable();

            $('#txtSearch').on('keyup change', function () {

                debugger;

                table.column(0).search(this.value).draw();

            });

        });

</script>

In addition to the above code, the following JavaScript library files are loaded for use in this example:

• https://code.jquery.com/jquery-3.5.1.js
• https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js
• https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js

The following CSS library files are loaded for use in this example to provide the styling of the table:

• https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css
• https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css

Html File

<table id="results" class="table table-striped table-bordered" style="width:100%">

    <thead>

        <tr>

            <th>Name</th>

            <th>Position</th>

            <th>Office</th>

            <th>Age</th>          

            <th>Salary</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Tiger Nixon</td>

            <td>System Architect</td>

            <td>Edinburgh</td>

            <td>61</td>          

            <td>$320,800</td>

        </tr>

        <tr>

            <td>Michael Bruce</td>

            <td>Javascript Developer</td>

            <td>Singapore</td>

            <td>29</td>           

            <td>$183,000</td>

        </tr>

        <tr>

            <td>Donna Snider</td>

            <td>Customer Support</td>

            <td>New York</td>

            <td>27</td>            

            <td>$112,000</td>

        </tr>

    </tbody> 

</table>