jquery isotope

Question

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

अब तक विचारों मैं थे:

• एक यादृच्छिक सबसेट लोड हो रहा है और फिर इसे करने के लिए नोड्स जोड़ने के रूप में फिल्टर अंतराल
• एक उपयोगकर्ता स्क्रॉल के रूप में अधिक नोड्स लोड हो रहा है को भरने के लिए क्लिक किया
• परिणामों को पेजिंग
• तब तक संपर्क प्रदर्शित नहीं कर रहा है जब तक कि पर्याप्त फ़िल्टर को पूर्व निर्धारित सीमा से नीचे लाने के लिए चुना गया न हो।

मुझे यकीन नहीं है कि ये अच्छी तरह से काम करेंगे और मैं उम्मीद कर रहा था कि दूसरों को इस स्थिति का सामना करना पड़ा और मुझे कुछ विचार दे सकते थे।

Answer 1

आपके द्वारा वर्णित स्थिति बहुत आम है: अपने उपयोगकर्ता को अधिक से अधिक डेटा तक पहुंचने के लिए कैसे संभवतः एक बार में विस्तार से देखा जा सकता है।

प्रश्न का उत्तर देने के कई तरीके हैं और सही उत्तर पूरी तरह से व्यक्तिपरक है: यह इस बात पर निर्भर करता है कि आपका उपयोगकर्ता संपर्कों को देखने या करने का प्रयास कर रहा है।इससे पहले कि आप वास्तव में एक संतोषजनक समाधान प्राप्त कर सकें, आपको यह जानना होगा कि उपयोगकर्ता संपर्कों का उपयोग करने के लिए क्या कर रहे हैं।

बस (लेकिन क्या आप मुझे की तुलना में बेहतर पता होगा!), मैं दो चीजें वे कर रहे हैं उम्मीद थी अनुमान लगा:

• लुक: एक विशिष्ट संपर्क के लिए खोज रहे हैं और वे पहले से ही उनके नाम पता/संभाल।
• एक्सप्लोर करें: एक विशिष्ट संपर्क की तलाश में है लेकिन वे अपना नाम/हैंडल बिल्कुल याद नहीं कर सकते हैं। या वे सिर्फ ब्राउज़ कर रहे हैं।

यदि आप सभी समाधानों के लिए फ़िल्टरिंग करते हैं, तो लुकअप लक्ष्य बैग में काफी अधिक है।

• यादृच्छिक सबसेट: इसकी नहीं एक शानदार तरीका आप मूल रूप से एक सबसेट के साथ छोड़ दिया हो ब्राउज़ करने के लिए और उसके बाद आप स्पष्ट रूप से कुछ भी नया देखने के लिए फ़िल्टर करना चाहिए के बाद से ब्राउज़ करने के लिए अन्वेषण लक्ष्य एक आप के लिए डिजाइन करने के लिए चाहते हैं। जब आप बिल्कुल नहीं जानते कि आप क्या खोज रहे हैं तो फ़िल्टर करना मुश्किल है।
• अनंत स्क्रॉलिंग: इन दिनों एक लोकप्रिय समाधान की तरह लगता है। मुझे यह बोझिल लगता है, खासकर यदि आप 1000+ संपर्कों के माध्यम से 'अनन्त' स्क्रॉलिंग कर रहे हैं। अन्वेषण लक्ष्य के लिए शायद अच्छा नहीं है।
• पेजिंग: भी बोझिल - लेकिन शायद अगर पेजिंग वर्णमाला क्रमबद्ध करने के लिए बंधी हुई है तो यह अच्छी तरह से काम कर सकती है।
• थ्रेसहोल्ड सीमित: तो ... बस फ़िल्टरिंग पर भरोसा करते हैं? यह कुछ कोने मामलों में खराब हो सकता है जिसमें उपयोगकर्ता एक फ़िल्टर लागू करता है और उन्हें कुछ भी नहीं देखा जाता है, थ्रेसहोल्ड अभी भी पूरा नहीं हुआ है (हो सकता है कि लॉट अंतिम नाम वाले लोगों के जॉनसन, जो कि है आपने जो खोजा है)। इसके अलावा, मुझे लगता है कि ब्राउज़ करने की क्षमता महत्वपूर्ण है जब आप नहीं जानते कि आप क्या खोज रहे हैं।

---

मुझे लगता है कि अगर मैं अपने जूते में थे, मैं कुछ संपर्कों को क्लस्टरिंग परिचय चाहते हैं। मुझे संदेह है कि 1000+ संपर्क एक प्रदर्शन समस्या का अधिकतर है (कम से कम आप एक लाख बात कर रहे हैं!), इसलिए 10000+ वास्तव में उपयोगकर्ता की बाधा है: वे सिर्फ एक बार में 1000 संपर्क नहीं देख सकते हैं।

मैं कुछ क्लस्टरिंग शुरू करने का सुझाव दूंगा, शायद अंतिम नाम या अंतिम नाम और पहला नाम। फिर उपयोगकर्ता को एक क्लस्टर में ड्रिल करने के तरीके के साथ प्रस्तुत करें लेकिन अन्य सभी संपर्कों को फोल्ड करें ताकि वे तुरंत दिखाई न दें। accordian/rollodex paradigm के रीम में कुछ। यह आपके उपयोगकर्ता को भ्रम देता है कि वे 'सभी संपर्कों' के साथ काम कर रहे हैं। शायद प्रत्येक क्लस्टर के लिए न्यूनतम संख्या लागू करें ताकि यदि क्लस्टर पर्याप्त रूप से छोटा हो, तो आप इसे दिखाने से परेशान नहीं हैं (यानी, 2 या 3 या 5 संपर्कों के लिए क्लस्टर क्यों दिखाएं - केवल संपर्क दिखाएं)। फिल्टर के रूप में लागू होते हैं, तो क्लस्टर दूर पिघल जाते हैं।

Answer 2

कैश के माध्यम से पढ़ने के विचार ले रहा है, कुछ की तरह:

• एक विधि है कि अप करने के लिए 100 का एक बैच (या किसी भी विन्यास संख्या) तत्वों लोड कर सकते हैं पैदा करते हैं। यह होगा:
  • फ़िल्टर किए गए आइटम
  • अनुरोध AJAX द्वारा फ़िल्टर आइटम
  • आइटम AJAX के द्वारा दिया कैश
  में शामिल किया जाएगा के लिए कैश (प्राथमिक कुंजी तत्व की आईडी के साथ जे एस सरणी) में खोज
  • AJAX द्वारा लौटाए गए आइटम को डीओएम (नीचे देखें) के नीचे "लोडिंग" क्षेत्र में भी जोड़ा जाएगा, बनाए गए डीआईवी की आईडी के साथ तत्व
  • की प्राथमिक कुंजी 100 तक भेज देगी तत्वों। यदि कोई फ़िल्टर नहीं है, तो यह अगले तत्व भेजेगा जो अभी तक भेजे गए नहीं हैं। आपको लोड किए गए तत्वों का ट्रैक रखना होगा। यदि सर्वर पक्ष (यानी सत्र) पर कैश किए गए डेटा का आकार महत्वपूर्ण है, तो आप केवल उच्चतम निरंतर भेजे गए आईडी (यानी यदि आप पहली बैच आईडी 1,2,3,6,9,10 में भेजते हैं, तो ट्रैक को ट्रैक कर सकते हैं) उच्चतम आईडी, 3 है, इसलिए अगली बार जब आप 4 से भेजना होगा ..., तो आप सत्र केवल एक मान)
• एक विधि है कि आइसोटोप कंटेनर से/कैश की गई DIVs स्थानांतरित कर सकते हैं बनाने में रखने
उपरोक्त विधि का उपयोग करके
• पर डॉमरेडी लोड और प्राकृतिक ऑर्डरिंग के पहले 20 तत्व प्रदर्शित करें (आपके मामले में यह नाम से वर्णानुक्रमित होगा)। यह 20 तत्व या 50 या कोई भी हो सकता है ...
पृष्ठभूमि में
• , AJAX द्वारा लूप में लोड करें और 100 सभी तत्वों के बैच में लोड करें।

लोड हो रहा है क्षेत्र बस हो सकता है:

<html> 
    <body> 
    <!-- the page stuff --> 
    <div id="loader" style='display:none'> 
     <!-- all elements are loaded here --> 
     <div class="item">...</div> 
    </div> 
    </body> 
</html> 

इस तरह आप लोड कर सकते हैं सभी तत्वों डोम में चरण दर चरण, और आप प्रदर्शित कर सकते हैं केवल क्या जरूरत है।

Answer 3

बड़ी संख्या में आइसोटोप वस्तुओं को जोड़ने और व्यवस्थित करते समय मुझे खराब प्रदर्शन का सामना करना पड़ रहा था और ऐसा इसलिए था क्योंकि मैं बैच की बजाय वस्तुओं को क्रमशः जोड़ रहा था। यह एक स्पष्ट पसंद होना चाहिए, लेकिन कुछ ऐसा जो मैंने अनदेखा किया था।

व्यक्तिगत रूप से लोड या हटाने के विपरीत, सरणी या तत्वों की सूची का उपयोग करना सुनिश्चित करें।

incomingData=['<div>a</div>','<div>b</div>']; 
elements=[]; 

jQuery.each(incomingData,function(ind,val){ 
    var element = jQuery(val).get(0); 
    //$container.isotope('insert', element); //resource heavy 
    elements.push(element); 
}); 

$container.isotope('insert', elements); //less processing