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.

Answer 2

You may want to give datatables.js/ a try. It is a jQuery plugin that will do what you are trying to build and is very simple to implement.

The code to implement it (which has paging, searching, column sorting, etc as defaults) is this.

  $('#example').dataTable();