क्लाइंट साइड

Question

पर बड़ी सूची फ़िल्टर करें मैं टेक्स्ट कीप के साथ टैब्यूलर डेटा की एक बड़ी सूची फ़िल्टर करने का प्रयास कर रहा हूं। निम्नलिखित

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 आइटम (टीआर) है।

अद्यतन: मुझे एक डाउन-वोट प्राप्त हुआ, इसलिए मुझे स्पष्टीकरण दें। मैं बड़ी मात्रा में कोड की तलाश नहीं कर रहा हूं। अगर मुझे इस फ़िल्टर को अन्यथा आर्किटेक्ट करने का एक बेहतर तरीका है तो मुझे बस कुछ विचारों की ज़रूरत है।

Answer 1

मैं अंतर्दृष्टि मैं जिस तरह से

1) के साथ उठाया साझा करेंगे डोम हेरफेर

से बचने यह एक नियम आप अक्सर सुनेंगे है और यह रूप में अच्छी तरह इस उदाहरण में सच बजाते। आप छोटे उदाहरणों में डोम को छेड़छाड़ कर सकते हैं, लेकिन यदि आप अच्छी तरह से लिखित एचटीएमएल नहीं रखते हैं तो यह महंगा हो जाता है और इससे भी महंगा हो जाता है क्योंकि आपको सटीक रूप से प्रयास करने और ढूंढने और उसका उपयोग करने के लिए एचटीएमएल तत्वों को पार्स करना होगा।

2) यदि आप डोम को कुशलता से कुशलतापूर्वक करने का निर्णय लेते हैं।

थोड़ी देर के लिए jquery का उपयोग करने के बाद आपको पता चलेगा कि ऐसे तरीके हैं जो आपके सिस्टम पर कर लगाने वाले jquery काम करता है। http://jsperf.com/jquery-children-vs-findall

आप गति के साथ मुद्दों में चला रहे हैं सुनिश्चित करें कि आप एक तरह से संभव

समाधान के रूप में के रूप में कुशल है कि में jQuery उपयोग कर रहे हैं:

यहाँ है कि मैं क्या कह रहा हूँ का एक उदाहरण है:

फ़िल्टर आइटम के साथ सूची बनाएं।

मैं क्लाइंट साइड पर सबकुछ रखने में सक्षम था जैसे कि मैंने मूल रूप से कल्पना की थी। मैं जेएस के माध्यम से गतिशील एचटीएमएल उत्पन्न कर रहा था इसलिए मेरी सूचियां बनाने के लिए मेरे पास पहले से ही तंत्र थे। मुझे फ़िल्टर वैरिएबल में एक नई विधि जोड़ने की ज़रूरत है और मेरी ऑब्जेक्ट को बताया कि मैं किस कॉलम को फ़िल्टर करने जा रहा था।

निष्कर्ष:

मैं जानता हूँ कि मैं कुछ दिशा निर्देश की वास्तविक कोड में अधिक से एक तरह से सर्वोत्तम प्रथाओं, और एक विकी फिर एक गुणवत्ता आश्वासन के अपने अधिक दे did not, लेकिन अगर मैं इस पार चलो है | यह मुझे बचाया हो सकता है क्लाइंट साइड पर बड़ी सूची फ़िल्टर करने के सर्वोत्तम तरीके के लिए मेरी खोज में घंटे।

Answer 2

क्या आप पृष्ठ को रीफ्रेश (सर्वर पक्ष) के साथ सूची फ़िल्टर करने पर विचार कर सकते हैं?

मुझे लगता है कि एक पृष्ठ में 2k लाइनों को प्रदर्शित करने की सलाह नहीं दी जाती है।
वास्तव में सर्वर से 2k लाइनों को लोड करना पहले से ही मुझे लगता है।
यदि आपको स्क्रॉल करने की आवश्यकता है तो आप उदाहरण के लिए AJAX के साथ पेजिनेट कर सकते हैं।
लेकिन अजैक्स के साथ अंकन/फ़िल्टरिंग उतना आसान नहीं है जितना लगता है।