3

I have a table which has some user details. I have populated those data from JSON. At the bottom of the table , i have a text field which is provided for users who can type some information to filter the table. For example,

Consider a table contains 10 rows. the first 6 rows contains developer details and the last 4 rows contains tester details. If a user type developer in the text box , then the table should display the rows, which contain information about the developer. how can i achieve this by using jQuery ?

I don't want to post my wrong code here. so please don't ask me to post some code.

Improve this question

2 Answers 2

Reset to default
3

You can use the filter() jquery function to filter through the rows until you find the ones which <td> matches what you write in a text box and filter after you click a button.

Example:

HTML:

<table id="myTable">
    <thead><tr><td>Member</td><td>Stuff</td></tr></thead>
    <tbody>
        <tr><td>Developer</td><td>1</td></tr>
        <tr><td>Developer</td><td>2</td></tr>
        <tr><td>Developer</td><td>3</td></tr>
        <tr><td>Tester</td><td>4</td></tr>
        <tr><td>Tester</td><td>5</td></tr>
    </tbody>
</table>
<input type="text" id="filter" />
<input type="button" id="btnFilter" value="Filter" />

Javascript:

$(document).ready(function() {
    $("#btnFilter").click(function() {
        $("#myTable tbody tr").show();
        if($("#filter").val.length > 0) {
            $("#myTable tbody tr").filter(function(index, elm) {
                return $(elm).html().toUpperCase().indexOf($("#filter").val().toUpperCase()) < 0;
            }).hide();
        }
    });
});

Working fiddle: http://jsfiddle.net/tKqw9/1/

EDIT: Added toUpperCase() to the text compare part so it compares case insensitive. Also added a compare to the whole <tr> element content so it can search over any cell value in the row.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Nice solution. One suggestion: make the text comparison case-insensitive so the user could type in either "Developer" or "developer" and still get valid results.
@JasonTowne Thanks. I updated the answer to search case insensitive and search over the whole <tr> content
@RobertoLinares can you explain index, elm in function?? and why you have used .toUpperCase() for two times ?
i have populated the data of table from json file. I tried your suggestion but its not working..
@arjun the index and elm parameters are default parameters that you can use in jquery looping functions like $.each(), $.map and $.filter() where index is the current element's index in the array and elm is a reference to the current element being used in this loop iteration. Also, I used toUpperCase() twice to be able to make a case insensitive comparison. The first use is to uppercase the HTML element content and the second use is to uppercase the textbox value.
|
2

You may want to consider a plugin like Datatables. It has built in filter functionality similar to what you're looking for.

http://www.datatables.net/

If you don't want to or can't use a plugin there are other options out there.

Improve this answer

2 Comments

Can i make it without using any plugins and just by using pure jquery ??
@arjun Absolutely. Check out my edit with a link to a similar question that was already asked and answered. The reason I recommended Datatables is because it included the filter feature you requested out of the box and includes other handy features like pagination and column sorting. If you don't need that other stuff then by all means write your own filter function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.