Search code examples
javascriptdatatablebootstrap-4web-deployment

Advanced search with data-table


I was wondering is there way to improve search in data table? I have a numeric column in a datatable. Is it possible to return back just the number being searched on?

So for example: 100 210 310 1

and if I search for 1 I want to show only :1 but not the others that contain 1

 jQuery(document).ready(function ($) {
    var db = $('#min-table').DataTable({
        "dom": '<"pull-left"f><"pull-right"l>tip',
        "bJQueryUI": true,
        "bSort": true,
        "bSearchable": true,
        "bPaginate": true,
        "lengthMenu": [[20, 35, 50, -1], [20, 35, 50, "All"]],
        "iDisplayLength": 20
    });

});

Solution

  • You can make use of datatable plugins to override some of the features. In your case, you can add your custom function to $.fn.dataTable.ext.search.push

    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
         const searchTerm = $("[type=search]").val();
         if(searchTerm){
           return data[3] === searchTerm
         }else{
           return true;
         }
        }
    );
    

    In the above code, I'm using a full text search on fourth column for each row. Row will be included or excluded based on the return value of the function (true or false).

    Ref: https://datatables.net/examples/plug-ins/

    Try the below snippet. Full text search enabled on age column.

    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
         const searchTerm = $("[type=search]").val();
         if(searchTerm){
           return data[3] === searchTerm
         }else{
           return true;
         }
        }
    );
    
    var table = $('#example').DataTable();
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
    <table id="example" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
                <tr>
                    <td>Cedric Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$433,060</td>
                </tr>
          </tbody>
     </table>