JQuery Table filter not working with plugin on ASP.NET MVC Page

Question

Hi

I have a table and trying to filter using uiTableFilter plugin as given at: http://silverwareconsulting.com/index.cfm/2008/10/2/jquery-autofiltering-table

Here is JQuery Function:

<script type="text/javascript">

$(document).ready(function() {
    $table = $("#myTable").tablesorter({widthFixed: true, widgets: ['zebra']});
    FilterText = "";
    ColumnArray = ["Country","Province/State"];
    for (i=0;i<ColumnArray.length;i++) {
        $("#myTable tbody tr").find("td:eq(" + i + ")").click( function() {
            clickedText = $(this).text();
            FilterText = ((FilterText == clickedText) ? "" : clickedText );
            $.uiTableFilter( $table, FilterText, ColumnArray[i]);
       });
    }
});

</script>

Below is my View Code:

<table id="myTable" class="tablesorter">
    <thead>
        <tr>

            <th align="left">Transaction<br />ID</th>
            <th align="left">Transaction<br />Date</th>
            <th align="left">Name</th>
            <th align="left">Email Address</th>
            <th align="left">Products</th>
        </tr>
    </thead>
    <tbody>
        <% foreach (var item in Model) { %>
            <tr id="<%= Html.Encode(item.TX_Id) %>">
                <td><%= item.TX_Id %></td>
                <td><%= String.Format("{0:g}", item.UpdatedOn) %></td>
                <td><%= Html.Encode(item.AddressDetail.CustomerMaster.FullName()) %></td>
                <td><%= Html.Encode(item.AddressDetail.Email) %></td>
                <td><%= item.Document.Product.Name %></td>

            </tr>
        <% } %>
    </tbody>
</table>

It is not hitting this line:

$("#myTable tbody tr").find("td:eq(" + i + ")").click( function() {

Thanks for all the responses.

Answer 1

The only thing I can see different between your code and the code in Bob's Blog is that the line

$table = $("#myTable").tablesorter({widthFixed: true, widgets: ['zebra']}); 

is broken into two different lines, line this:

$table = $("#myTable")
    .tablesorter({widthFixed: true, widgets: ['zebra']}); 

It's that way in his blog post, and if you view/source on his example, it's that way in his script, too.

Yes, I know what you're thinking, but whitespace is sometimes significant in Javascript, particularly when it adds missing semicolons at the end of lines. You have nothing to lose by trying.

Answer 2

I believe that is not the problem.

I am trying to debug at this line in my function: $("#myTable tbody tr").find("td:eq(" + i + ")").click( function() {

It is not able to find the ("td:eq(" + i + ")") in that table. I have seen it in the "View Source".

Here is my View Source:

    <thead>
        <tr>
            <th></th> 
            <th align="left">Transaction<br />ID</th>
            <th align="left">Transaction<br />Date</th>
            <th align="left">Name</th>
            <th align="left">Email Address</th>
            <th align="left">Products</th>
                        </tr>
    </thead>
    <tbody>
            <tr id="1">
                <td class="plus"><img src="/images/Expand_button_white.jpg" alt="" /></td>
                <td>1</td>
                <td>10/7/2009 7:09 AM</td>
                <td>Mike</td>
                <td>[email protected]</td>
                <td>Product 1</td>

This is the Pluig i have used: