jQuery dataTable search value 'Active' not working

Question

Good day! I'm having trouble with searching in jquery dataTable search bar for the string word 'Active'. If I change search bar the for the word 'Inactive'. The table will filter. However it does not seem to work with the string 'Active'.

This is all the data:

When I search Inactive When I search Active

Table code:

<table class="table table-hover table-bordered" id="table1">
                                <thead>
                                    <tr>
                                        <th>Faculty Code</th>
                                        <th>Last Name</th>
                                        <th>First Name</th>
                                        <th>Middle Name</th>
                                        <th>Position</th>
                                        <th></th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php  while ($row = $result -> fetch_object()): ?>
                                    <tr>
                                        <td><?php echo $row->Faculty_ID;?></td>
                                        <td><?php echo $row->Faculty_Lastname ;?></td>
                                        <td><?php echo $row->Faculty_Firstname ;?></td>
                                        <td><?php echo $row->Faculty_Middlename;?></td>
                                        <td><?php echo $row->Position; ?></td>
                                        <td class="text-center">
                                            <a  class="btn btn-sm btn-outline-primary text-muted" href="Faculty_edit.php?Faculty_ID=<?php echo $row->Faculty_ID;?>">Edit</a>

                                            <a  data-fid="<?php echo  $row->Faculty_ID;?>" title="Delete Faculty" data-toggle="modal" data-target="#delete_modal"  class="btn btn-sm btn-outline-danger delete-faculty-btn text-muted" >Delete</a>
                                        </td>

                                        <td>
                                            <?php if($row->Status=='Active') echo '<a href="#deactive_account" data-toggle="modal" data-id='.$row->Faculty_ID.' class="activate" style="color:green;">Active</a>'; ?>
                                            <?php if($row->Status=='Inactive') echo '<a href="#active_modal" data-toggle="modal" data-id='.$row->Faculty_ID.' class="activate" style="color:red;">Inactive</a>'; ?>
                                        </td>
                                    </tr>
                                    <?php endwhile; ?>
                                </tbody>
                            </table>

jQuery Code:

<script>
    $('#table1').DataTable({
    order: [],
    columnDefs: [ { orderable: false, targets: [5] } ]
    });
</script>

jquery datatable search doest not match exact but match contains that is why active matches with Active as well as Inactive. — Bhushan Kawadkar, Aug 10 '18 at 12:13
Please refer this https://stackoverflow.com/questions/8609577/jquery-datatables-filter-column-by-exact-match — Bhushan Kawadkar, Aug 10 '18 at 12:19
I'm new to jQuery how to script this code: oTable.fnFilter( "^"+TERM+"$", COLUMN , true); — jerico, Aug 10 '18 at 12:53

Bhushan Kawadkar · Accepted Answer · 2018-08-10T14:23:56.110

$(function(){
var table1 = $('#table1').DataTable({
        order: [],
        "oSearch": {"bSmart": false}, // disable smart search
        columnDefs: [ { orderable: false, targets: [5] } ]
        });
 $('#table1_wrapper input[type=search]').on( 'keyup click', function () {
      table1
        .column('6')
        .search( "^" + this.value, true, false, true )
        .draw();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" rel="stylesheet"/>
<table class="table table-hover table-bordered" id="table1">
                                <thead>
                                    <tr>
                                        <th>Faculty Code</th>
                                        <th>Last Name</th>
                                        <th>First Name</th>
                                        <th>Middle Name</th>
                                        <th>Position</th>
                                        <th></th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                    <tr>
                                        <td>1</td>
                                        <td>lastname1</td>
                                        <td>FirstName1</td>
                                        <td>Middlename1</td>
                                        <td>Manager</td>
                                        <td class="text-center">
                                            <a  class="btn btn-sm btn-outline-primary text-muted" href="#">Edit</a>

                                            <a  data-fid="" title="Delete Faculty" data-toggle="modal" data-target="#delete_modal"  class="btn btn-sm btn-outline-danger delete-faculty-btn text-muted" >Delete</a>
                                        </td>

                                        <td>
                                            <a href="#deactive_account" data-toggle="modal" class="activate" style="color:green;">Active</a>
                                        </td>
                                    </tr>
         <tr>
                                        <td>2</td>
                                        <td>lastname2</td>
                                        <td>FirstName3</td>
                                        <td>Middlename4</td>
                                        <td>Manager</td>
                                        <td class="text-center">
                                            <a  class="btn btn-sm btn-outline-primary text-muted" href="#">Edit</a>

                                            <a  data-fid="" title="Delete Faculty" data-toggle="modal" data-target="#delete_modal"  class="btn btn-sm btn-outline-danger delete-faculty-btn text-muted" >Delete</a>
                                        </td>

                                        <td>
           <a href="#active_modal" data-toggle="modal" class="activate" style="color:red;">Inactive</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

you can try below code where search will be restricted to last column only See Datatable API documentation for more details

It says.. DataTables warning: table id=table1 - Cannot reinitialise DataTable. — jerico, Aug 10 '18 at 13:42
you don't need to call `.DataTable` again, just add `oSearch` part to your code — Bhushan Kawadkar, Aug 10 '18 at 13:42
I have updated the post but column search will be limited to 6th column only — Bhushan Kawadkar, Aug 10 '18 at 14:24
Yes you can but for this better you need to enable each column search as shown in https://datatables.net/examples/api/multi_filter.html and override `.search` method with same logic what i did. Hope this will helps you — Bhushan Kawadkar, Aug 13 '18 at 04:34

jQuery dataTable search value 'Active' not working

1 Answers1