Make table row filter work after changing its content dynamically

Question

I am using following code for filtering table rows according to text entered in input textbox (according to the solution given on this link).

var $rows = $('#deviceInfoTable tr');
        $('#searchVehicleName').keyup(function() {
            var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

            $rows.show().filter(function() {
                var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                return !~text.indexOf(val);
            }).hide();

It works fine at the first time, but when I change table rows using AJAX, it does not work. My Table structure is as follows:

 <table width="100%" bordercolor="#ddd" border="1" id="devicesInfoTable" class="table-hover">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" onclick="checkAll(this)"></th>
                                    <th><input type="text" placeholder="Search Vehicle Name" class="form-control" id="searchVehicleName"></th>
                                    <th>Date</th>                       
                                </tr>
                            </thead>
                            <tbody id="deviceInfoTable">
                                <tr>
                                    <td>
                                        <div class="checkbox"> 
                                            <input type="checkbox" onclick="displayLiveLocation()" value="0358911020092058" name="IMEISeries[]" class="IMEISeriesClass[]">
                                        </div>
                                    </td>
                                    <td id="0358911020092058_vname">RJ14</td>
                                    <td id="0358911020092058_vdate">21-Nov-2015 00:45:03</td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="checkbox"> 
                                            <input type="checkbox" onclick="displayLiveLocation()" value="0358899055641537" name="IMEISeries[]" class="IMEISeriesClass[]">  
                                        </div>
                                    </td>
                                    <td id="0358899055641537_vname">GT06N Test</td>
                                    <td id="0358899055641537_vdate">17-Dec-2015 06:22:52</td>
                                </tr>
                            </tbody>
                        </table>

Only inner HTML of tbody gets changed during AJAX. I looked around, but couldn't any solution. Any idea? Thanks in advance.

You would also have to update `$rows` after you've changed the table — Andreas, Feb 04 '16 at 07:13

score 1 · Accepted Answer · answered Feb 04 '16 at 07:18

1

You need to move your

var $rows = $('#deviceInfoTable tr');

code into the keyup function

$('#searchVehicleName').keyup(function() {
    var $rows = $('#deviceInfoTable tr');
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

answered Feb 04 '16 at 07:18

Batu.Khan

3,060
2
19
26

Thanks! did not think it would be that simple. – A J Feb 04 '16 at 07:29

score 0 · Answer 2 · answered Feb 04 '16 at 07:15

you can try to use on Event handler after ajax calls:

var $rows = $('#deviceInfoTable tr');
$('#devicesInfoTable').on( "keyup", '#searchVehicleName', function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

            $rows.show().filter(function() {
                var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                return !~text.indexOf(val);
            }).hide();

Make table row filter work after changing its content dynamically

2 Answers2