2012-01-20 2 views
5

テキストキーアップで表形式のデータの大きなリストをフィルタリングしようとしています。クライアント側で大きなリストをフィルタリングする

私はあなたがの内容でリストを反復はるかに小さいリストで作業し、これらにより以下の

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

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

のようなソリューションを使用していた過去に

フィルターを表示し、表示するかどうかに応じて個々の表示を切り替えます。

は、私はまた、クライアント側でのすべてのフィルタリングを維持しようとしています

(jqueryのに付属しているものを除く)任意の追加プラグインを使用せずに、このフィルタリングを達成しようとしています。

は、ここで私は、データ・コードの内容を濾過しています私のマークアップ

<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> 

です。また、私のリストのサイズは約2,000項目(tr)です。

更新:私は下見を受け取りましたので、私は明確にしましょう。私は大量のコードを探しているわけではありません。私はそれをやっているやり方以外に、このフィルターを設計するより良い方法があれば、ちょっと考えが必要です。

+2

あなたに質問を+1させてください、それは私のために悪いものではありません –

+1

良い質問相手 – foxybagga

+0

本当に良い質問。 – Saim

答えて

1

私は、これはあなたが頻繁に聞こえますルールですDOM操作

を避けるため、私は道

1)に沿って拾った洞察を共有し、それは同様に、この例では、真のリング。小さなインスタンスでDOMを操作することはできませんが、HTMLをよく書いていないと、素早く高価になってしまいます。また、HTML要素を解析してHTML要素を探して操作し、操作しなければならない場合は、

2)domを操作することを決定した場合、効率的に実行します。

jqueryをしばらく使用した後、jqueryがシステムに課税されるような仕組みがあることに気づくでしょう。ソリューション

できるだけ効率的な方法で、あなたはjqueryのを使用していることを確認し http://jsperf.com/jquery-children-vs-findall

をあなたはスピードの問題に実行している場合:ここでは

は、私が言っているものの例です。

フィルタ項目を含むリストを作成します。

私は当初想定していたようにクライアント側にすべてを保持することができました。私はjs経由で動的なhtmlを生成していたので、リストを構築するための仕組みが既に用意されていました。フィルター変数を取り込んで、フィルターをかけようとしていた列をオブジェクトに伝える新しいメソッドを追加するだけです。

結論:私は実際のコードのいくつかのガイドラインのより、ソートのベストプラクティス、そしてウィキQAのその多くを与えていませんでしたが、私はこれに遭遇しているならば、それは私を救ったかもしれない知っている

クライアント側で大規模なリストをフィルタリングするための最良の方法を検索しました。

1

ページリフレッシュ(サーバー側)でリストをフィルタリングすることを検討できますか?

1ページに2k行を表示することはお勧めしません。
実際にサーバーから2k行をロードするだけでは、あまりにも多くのことが考えられます。
スクロールする必要がある場合は、たとえばajaxで改ページできます。
しかし、ajaxを使ったページネーション/フィルタリングはそれほど簡単ではありません。

+0

内容はスクロール可能な表に表示されるので、圧倒的なリストではありません。私は、サーバー側のオプションと一緒に行かなければならないかもしれません。私はちょうどクライアント側のための他のオプションがあるかどうかを見たいと思った。 –

+0

[その他のオプション](http://gregweber.info/projects/uitablefilter)があるかもしれませんが、とにかくクライアントサイドフィルタリングでパフォーマンスの問題が発生すると思います。 –

関連する問題