CODEWITHSUNDEEP
jquery
Ram Singh
Ram Singh

Reputation: 6918

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.

Upvotes: 0

Views: 11271

Answers (3)

Sribin
Sribin

Reputation: 317

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();

                });
            });
        });

Upvotes: 1

MA9H
MA9H

Reputation: 1909

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', '');
            }
        });
    }

Upvotes: 3

Sam Huggill
Sam Huggill

Reputation: 3126

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/

Upvotes: 2

Related Questions