data filtering in gridview using jquery

i have done the data filteration in gridview as like

http://tomcoote.co.uk/wp-content/CodeBank/Demos/columnFilters/demo.html

on this page. But my requirement is some different from it. I Have a开发者_如何学编程 textbox outside the gridview i want to filter data according to this. please help me as soon as possible.

Thanks In advance.

I wrote the following function myself, you just send it the column index that you want to filter, and the ID of the textbox you're filtering from.

Don't forget to change the gridview/table name to your's

function filter(columnIndex, id) {
        var filterText = $("#" + id).val().toLowerCase();

        var cellText = "";
        var cellTextSampleToCompare = "";

        $("#<%=YOUR_GRIDVIEW_NAME.ClientID%> tr:has(td)").each(function () {
            cellText = $(this).find("td:eq(" + columnIndex + ")").text().toLowerCase();
            cellText = $.trim(cellText);    //removes the spaces in the starting of the string value if exist
            cellTextSampleToCompare = cellText.substring(0, filterText.length);

            if (filterText != cellTextSampleToCompare) {
                $(this).css('display', 'none');
            }
            else {
                $(this).css('display', '');
            }
        });
    }

If you are using jQuery then consider the excellent jQuery DataTables plugin which works incredibly well on a simple TABLE element: http://www.datatables.net/

This might not be the answer for you question but it might help people who comes here.

 $(document).ready(function () {
            $("#txtID").keyup(function () {
                _this = this;
                $.each($("#grdEmployee tbody").find("tr:has(td)"), function () {
                    if ($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) != -1)
                        $(this).show();
                    else
                    $(this).hide();

                });
            });
        });