Jquery + Dynamically filter table data

Question

Hi,

I have a table developed using jtemplates. The table has 5 columns. Lets say C1....C5.

I need to have a filter below each header which can filter the table data. There are a lot of plugins to do this and currently I am using PicNet table filter : http://www.picnet.com.au/picnet_table_filter.html

The trouble is, that whenever the user starts typing, the filtering is done on the current rows only. I want the filtering to be done not just on the current records but on the entire dataset or all the rows that I am getting from the database...and then show only the relevant parts.

How to do this ? Any ideas ?

Here is my aspx markup :

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="JTemplatesCustomGrid._Default" MaintainScrollPositionOnPostback="true" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style>
    /* Sortable tables */
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}
</style>

    <script type="text/html" id="tableTemplate">

        {#foreach $T.d as data}

        <tr>
            <td>{$T.data.SerialNumber}</td>
            <td>{$T.data.ACCT_NUM}</td>
            <td>{$T.data.ITEM_CODE}</td>
            <td>{$T.data.GTIN}</td>
            <td>{$T.data.ITEM_DESC}</td>
            <td>{$T.data.MATCH}</td>
            <td>{$T.data.MATCH_METHOD}</td>
            <td>{$T.data.MFR_ID}</td>
            <td>{$T.data.MFR_NAME}</td>

        </tr>

        {#/for}


    </script>

    <script type="text/javascript" language="javascript">





        function TextChanged(obj) {

            alert(obj.value);
        }
        function SelectChanged(obj) {

            alert(obj.options[obj.selectedIndex].value);
        }
        $(function () {




            function GetTotalPages(totalRowCount) {
                var totalPages = (parseInt(totalRowCount, 10) / 10);
                var totalPagesRounded = Math.round(totalPages);
                if (totalPagesRounded < totalPages) {
                    totalPages = totalPagesRounded + 1.0;

                }
                else {
                    totalPages = totalPagesRounded;
                }
                return totalPages;
            }



            $('#hidPageNumber').val("1");

            PageData($('#hidPageNumber').val());



            $('#next').click(function () {


                var currentPage = parseInt($('#hidPageNumber').val(), 10);



                if (currentPage == GetTotalPages(parseInt($('#hidRowCount').val()))) {
                    $('#next').click(function (e) { e.preventDefault(); });
                    return;
                }

                else {


                    //$('#hidPageNumber').val((currentPage + 1) * 10);
                    $('#hidPageNumber').val((currentPage + 1));

                    PageData($('#hidPageNumber').val());




                }

            });

            $('#prev').click(function () {

                var currentPage = parseInt($('#hidPageNumber').val(), 10);



                if (currentPage == 0) {
                    $('#prev').click(function (e) { e.preventDefault(); });
                    return;
                }


                else {

                    //$('#hidPageNumber').val((currentPage - 1) * 10);
                    $('#hidPageNumber').val((currentPage - 1));
                    PageData($('#hidPageNumber').val());
                }
            });

            $('#first').click(function () {
                var currentPage = parseInt($('#hidPageNumber').val(), 10);
                if (currentPage == 1) {
                    $('#first').click(function (e) { e.preventDefault(); });
                    return;
                }
                else {
                    $('#hidPageNumber').val("1");



                    PageData(1);
                }



            });
            $('#last').click(function () {
                var currentPage = parseInt($('#hidPageNumber').val(), 10);
                var totalRows = $('#hidRowCount').val();
                if ((currentPage * 10) >= totalRows) {
                    $('#first').click(function (e) { e.preventDefault(); });
                    return;
                }
                else {

                    $('#hidPageNumber').val(GetTotalPages(parseInt($('#hidRowCount').val())).toString());
                    PageData(GetTotalPages(parseInt($('#hidRowCount').val())));

                }

            });



        });


        function PageData(startRowIndex) {

            $.ajax({

                url: "Default.aspx/GetTotalRowsCount",
                dataType: "json",
                contentType: "application/json; charset=utf-8;",
                data: '{"startRowIndex": "' + startRowIndex + '", "maxRows": "10"}',
                type: "POST",

                success: function (msg) {



                    $('#hidRowCount').val(msg.d);

                    $.ajax({

                        url: "Default.aspx/GetDataDetails",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8;",
                        data: '{"startRowIndex": "' + startRowIndex + '", "maxRows":"10","groupingField":"MFR_ID"}',
                        type: "POST",

                        success: function (msg) {







                            $('#myTable tbody').setTemplate($('#tableTemplate').html());
                            $('#myTable tbody').processTemplate(msg);

                            $('#myTable').tableFilter();
//                            $('#myTable').groupRows({
//                                groupColumn: 8,
//                                columnsForGroupRow: []
//                            });
                            var x = $('#myTable thead').children('tr').length;
                            if (x > 2) {
                                $('#myTable thead').find('tr[class="filters"]').first().remove();
                                // $('#myTable').tableFilter();
                            }
                        }
                    });
                },

                error: function (msg) { alert(a); }
            });

        }


    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div style="text-align: center">
        <input type="hidden" id="hidPageNumber" />
        <input type="hidden" id="hidRowCount" />
        <table style="width: auto; border-collapse: collapse;border:1px solid black"  rules="all" id="myTable" class="sortable">

            <thead>
                <tr>
                    <th style="width: 100px">Serial Number 

                    </th>                           
                    <th style="width: 100px">ACCT_NUM

                    </th>                           
                    <th style="width: 100px">ITEM_CODE

                    </th>                           
                    <th style="width: 100px">GTIN

                    </th>                           
                    <th style="width: 100px">ITEM_DESC

                    </th>                    
                    <th style="width: 100px">MATCH

                    </th>                    
                    <th style="width: 100px">MATCH_METHOD

                    </th>                    
                    <th style="width: 100px">MFR_ID

                    </th>                                                
                    <th style="width: 100px">MFR_NAME

                    </th>
                </tr>
            </thead>
            <tbody >
            </tbody>
            <tfoot>
            </tfoot>
            </table>
            <br />
            <table width="100%">
                <tr style="width:100%">
                    <td colspan="4" style="text-align: right">
                        <a href="#" id="first">First</a>&nbsp;<a href="#" id="prev">Prev</a>

                    </td>
                    <td>
                    </td>
                    <td colspan="4" style="text-align: left">
                        <a href="#" id="next">Next</a>&nbsp;<a href="#" id="last">Last</a>
                    </td>
                </tr>

                <tr style="width:100%">
                <td colspan="9" style="text-align: right">
                <input type="button" value="Export to CSV" onclick="javascript:$('#myTable').table2CSV();" />
                </td>
                </tr>

        </table>
    </div>
</asp:Content>