Using Jquery To Filter Data

Fig: Screenshot of the result

When a webpage is designed to display large tables of data, a non bad amount of consideration should hold out dedicated to allowing the user to form through the information inwards a structured manner. In this article, I volition become over 1 techniques:  filtering.

If a website calls for many records of information to hold out displayed, inwards my example K rows, together with thence it
is to a greater extent than than appropriate to offering the user a means to sift through the data. One specially effective means that has sprung upwards on the spider web inwards recent years equally constituent of
the Web2.0/AJAX displace is filtering. This is also something that Apple pushes heavily inwards at that topographic point applications such equally iTunes. The finish for us is to allow the user
to type a search query into a criterion text input together with alive filter the tabular array rows below exclusively showing the ones that comprise matching text. This is arguably more
advanced together with thence the alternating row styles, but inwards all reality requires minimal code, due to jQuery’s built-in functionality.

First nosotros volition write a generic constituent that takes a selector together with a string of text. This constituent volition together with thence search all elements matching that selector looking for
the string. If it finds the string, it volition demo the chemical component together with apply a course of report refer of visible to the element, otherwise it enshroud the element. Why are nosotros applying
the course of report of visible? Well 1 time the items are sorted nosotros volition wish to run the zebraRows constituent again, but nosotros postulate to tell jQuery to ignore the hidden rows, and
the best means I take maintain establish to produce that is apply a course of report of visible.

The actual searching is done past times the JavaScript function, aptly named, search(). Though due to the means the DOM works, if nosotros don’t employ the jQuery function,
text(), the box volition also expect at whatever HTML tags that tumble out to hold out inwards the tabular array row, such equally <td>. We
will employ a niggling to a greater extent than functionality past times non only searching for the exact string the user has typed, but rather if whatever of the words inwards the query are inwards a row.
This is ideal because it allows for “lazy searching”, the user isn’t required to recall an exact string but rather only parts of it. The search() constituent takes
a regular aspect equally its parameter, together with thence nosotros must strip all white infinite from the outset together with terminate of our query together with seat “|” characters inwards betwixt each give-and-take to
achieve the OR functionality nosotros desire.

view plaincopy to clipboardprint?

1. //filter results based on query  
2. function filter(selector, query) {  
3.   query =   $.trim(query); //trim white space  
4.   query = query.replace(/ /gi, '|'); //add OR for regex query  
5.   
6.   $(selector).each(function() {  
7.     ($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible');  
8.   });  
9. }  
10.    

The 6th describe of piece of work is where the magic happens, together with likely requires a flake of explanation. Starting at describe of piece of work 5, nosotros are telling the code to loop through all the elements
that agree the selector, i.e. the rows, together with and thence nosotros wish to execute the code on describe of piece of work 6 using each one. Line 6 is a flake complicated if y'all are novel to programming,
but it is fairly slow to grasp if nosotros separate it up. Think of everything earlier the interrogation grade equally existence a question, if the respond to that interrogation is truthful then
execute the code to the left of the colon, but later the interrogation mark. If the respond is faux together with thence execute the code later the colon. This is essentially an if
statement but inwards a to a greater extent than concise shape known equally a ternary operator, together with would hold out no unlike than writing:

1. 
   ...  
2.   if ($(this).text().search(new RegExp(query, "i")) < 0) {  
3.     $(this).hide().removeClass('visible')  
4.   } else {  
5.    $(this).show().addClass('visible');   
6.   }  
7. ...  
8.       

The argue nosotros inquire if search() returns "< 0" is because it returns the seat inwards the string where query is, together with -1 if zip is matched. Because -1 is always
less than zero, nosotros exam that condition. In theory at that topographic point is zip incorrect amongst checking if it returns (==) -1, but it inwards do it is safer to only assure it is
less than zero.

Alright at 1 time that nosotros take maintain a consummate filter function, let's work jQuery events to claw it upwards to the input. To accomplish the alive lawsuit nosotros wish the lawsuit nosotros wish to
watch for is when user releases a primal spell they are focused on the text box, known equally keyup inwards JavaScript. It is of import that nosotros laid the ID attribute of the
input thence nosotros tin target it using jQuery. Back inwards our laid upwards constituent nosotros postulate to add together code later our telephone telephone to zebraRows().

view plaincopy to clipboardprint?

1. <label for="filter">Filter</label>  
2. <input type="text" name="filter" value="" id="filter" />  

And the jQuery code:

view plaincopy to clipboardprint?

1. ...  
2.   //default each row to visible  
3.   $('tbody tr').addClass('visible');  
4.     
5.   $('#filter').keyup(function(event) {  
6.     //if esc is pressed or nothing is entered  
7.     if (event.keyCode == 27 || $(this).val() == '') {  
8.       //if esc is pressed we want to clear the value of search box  
9.       $(this).val('');  
10.               
11.       //we want each row to be visible because if nothing  
12.       //is entered then all rows are matched.  
13.       $('tbody tr').removeClass('visible').show().addClass('visible');  
14.     }  
15.   
16.     //if there is text, lets filter  
17.     else {  
18.       filter('tbody tr', $(this).val());  
19.     }    
20.     
21.     

Source: http://net.tutsplus.com/tutorials/javascript-ajax/using-jquery-to-manipulate-and-filter-data/

Sumber http://developer-paradize.blogspot.com