Tablesorter and search

Question

I have a big table and I want to add a search function on it. I used tablesorter to do the columns sortables and also a tutorial to add another column in the beginning for numbering the rows. But Search doesn't work. Here is my code:

HTML

<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="/static/js/jquery.tablesorter.pager.js"></script>
<script src="/static/js/jquery.quicksearch.js" type="text/javascript"></script>
    <table id="myTable" class="table table-bordered tablesorter">
       <thead>

       </thead>
       <tbody>

       </tbody>
       <tfoot>
         <tr style="display:none;">
             <td colspan="5">
                 No rows match the filter...
             </td>
        </tr>       
       </tfoot>
    </table>
    <div id="pager" class="pager">
        <form>
             <img src="/static/blue/first.png" class="first"/>
             <img src="/static/blue/prev.png" class="prev"/>
             <input type="text" class="pagedisplay"/>
             <img src="/static/blue/next.png" class="next"/>
             <img src="/static/blue/last.png" class="last"/>
             <select class="pagesize">
             <option value="10">10 per page</option>
             <option value="20">20 per page</option>
             <option value="50">50 per page</option>
             </select>
       </form>
    </div>

And here is my javascript:

<script>
$(document).ready(function() 
    {
    $.tablesorter.addWidget({
    id: "numbering",
    format: function(table) {
        var c = table.config;
        $("tr:visible", table.tBodies[0]).each(function(i) {
            $(this).find('td').eq(0).text(i + 1);
        });
    }
});


    $("table").tablesorter({widgets: ['numbering'],sortInitialOrder: 'desc', sortList: [[2,1]],headers: {0: {sorter: false}}})
    .tablesorterPager({container: $("#pager")});

    $("#myTable tbody tr").quicksearch({
            labelText: 'Search: ',
            attached: '#myTable',
            position: 'before',
            delay: 100,
            loaderText: 'Loading...',
            onAfter: function() {
                if ($("#myTable tbody tr:visible").length != 0) {
                    $("#myTable").trigger("update");
                    $("#myTable").trigger("appendCache");
                    $("#myTable tfoot tr").hide();
                }
                else {
                    $("#myTable tfoot tr").show();
                }
            }
        });

    }

</script>

I don't see any error. Just the search function doesn't there.

Answer 1

It looks like quicksearch is being attached to #table and not #myTable which is the ID of the table in the HTML you shared.