Home/ Questions/Q 7165863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T14:19:14+00:00

I am attempting to Filter a large list of tabular data with text keyup.

  • 0

I am attempting to Filter a large list of tabular data with text keyup.

In the past I was working with much smaller lists and using solution like the following

http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/

and

http://papermashup.com/jquery-list-filtering/

With these you iterate through the list with the contents of your filter, and you toggle the individual displays based on whether it should be shown or not.

I am trying to achieve this filtering without using any additional plugins (except for anything that comes with jquery)

I am also trying to keep all the filtering on the client side.

Here is my markup

<div>
  <table>
     <tbody>
         <tr class="mm-list-control-item" data-code="WHLO-AM">
           <td> WHLO-AM </td>
           <td>Rubber City</td>
           <td>Classic Hits</td>
         </tr>           
         <tr class="mm-list-control-item" data-code="WHLO-AM">
           <td> WHLO-AM </td>
           <td>Rubber City</td>
           <td>Classic Hits</td>
         </tr>
         <tr class="mm-list-control-item" data-code="WKDD-FM">
           <td> WKDD-FM </td>
           <td>Rubber City</td>
           <td>Classic Hits</td>
         </tr>
         <tr class="mm-list-control-item" data-code="WNIR-FM">
           <td> WNIR-FM </td>
           <td>Rubber City</td>
           <td>Classic Hits</td>
         </tr>
     <tbody>
  <table>
</div>

I am filtering off the data-code contents. Also the size of my list is roughly 2,000 items(tr).

UPDATE: I received a down-vote so let me clarify. I am not looking for large amounts of code. I just need some thoughts if there is a better way to architect this filter other then the way I am doing it.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I will share the insights I picked up along the way

    1) avoid dom manipulation

    This is a rule you will hear often and it rings true in this example as well. You can get away manipulating the dom in small instances, but it gets expensive quickly and even more expensive if you dont have well written html as you will have to parse and html elements to try and locate and manipulate the exact are that you want to.

    2) If you decide to manipulate the dom do so efficiently.

    After using jquery for awhile you will realize that there are ways that jquery works that is taxing on your system.

    Here is an example of what I am saying:
    http://jsperf.com/jquery-children-vs-findall

    If you are running into issues with speed make sure that you are using jquery in a way that is as efficient as possible

    Solution:

    Build the list with the filter item included.

    I was able to keep everything on the client side like I originally envisioned. I was generating dynamic html via js so i already had the mechanisms in place to build my lists. I just need to add a new method that took in the filter variable and told my object what column(s) I was going to filter off.

    Conclusion:

    I know I didnt give actual code more of some guidelines and best practices of sort, and its more of a wiki then a QA, but if I would have come across this it may have saved me hours in my search for the best way to filter large list on the client side.

    • 0