त्वरित HTML तालिका छंटनी?

Question

हाँ, मैं जानता हूँ कि एक वहाँ जे एस/jQuery कार्यक्रमों के बहुत यह करने के लिए कर रहे हैं। मैं वर्तमान में http://www.kryogenix.org/code/browser/sorttable/sorttable.js का उपयोग कर रहा हूं। यह बहुत आसान है: बस एक जेएस फ़ाइल, अपनी तालिका में कुछ वर्ग विशेषताओं को जोड़ें, और आप बंद हैं। विशेष रूप से, आपको वास्तव में इसका उपयोग करने के लिए जेएस को जानने की आवश्यकता नहीं है, और आप इसे विस्तारित करने के लिए अपने स्वयं के जेएस लिखने के बिना कस्टम सॉर्ट कुंजियां जोड़ सकते हैं। मुझे उन दो कारणों से बहुत पसंद है। मुख्य समस्या: मेरी तालिका ~ 9300 पंक्तियां लंबी है, और सॉर्टिंग में 10-20 सेकंड लगते हैं। तो मैं सोच रहा हूं, क्या इससे कोई और स्क्रिप्ट इतनी तेज है? इन लोगों को मैंने पाया हैं:

http://webfx.eae.net/dhtml/sortabletable/sortabletable.html (भी सुनिश्चित नहीं हैं कि इस का उपयोग करता है)
http://tablesorter.com/docs/ (वास्तव में वास्तव में अच्छा है, लेकिन नहीं का विस्तार करने की आवश्यकता है, जे एस/jQuery जानने के लिए आसान) http://flexigrid.info/ (Overkill, मैं सिर्फ जरूरत है एक मेज सॉर्टर, नहीं एक पूरे डेटा हेरफेर कार्यक्रम)
http://datatables.net/ (Overkill, विस्तार करने के लिए)

मैं वहाँ 5000 अन्य कार्यक्रमों है कि मैं क्या चाहते हैं कर सकते हैं यकीन है कि जे एस/jQuery आवश्यकता है, लेकिन मेरे पास नहीं है यह पता लगाने के लिए समय है कि वे तेजी से हैं या नहीं। इस प्रकार मैं जानना चाहता हूं कि स्टैक ओवरफ्लो पर कोई व्यक्ति मुझे बता सकता है कि जो भी पुस्तकालय वे तेजी से जानते हैं, इसलिए मुझे केवल एक प्रोग्राम का उपयोग करने का तरीका पता लगाना है।

(Btw, मैं quicksort साथ मिलीसेकेंड में संख्या के हजारों के जावा तरह सैकड़ों देखा है; किसी को पता है क्या एल्गोरिथ्म JS.sort() का उपयोग करता है?)

Answer 1

मैं (एक और jQuery DataTables के साथ महान सफलता मिली है प्लगइन) आप जिस पंक्ति के बारे में बात कर रहे हैं उसके समान पंक्ति संख्याओं के साथ। जावा में जो देखा है उस पर जावास्क्रिप्ट के साथ आप जिस गति हानि को देख रहे हैं वह वास्तव में एक डोम प्रस्तुत कर रहा है, जो कि बहुत अधिक काम है। डेटाटेबल्स की सुंदरता यह है कि आपके पास जावास्क्रिप्ट सरणी (अनिवार्य रूप से जेसन) से डेटा को स्रोत करने की क्षमता है - इसलिए सॉर्टिंग सरणी (जावा की समान गति) पर किया जाता है, और उसके बाद केवल उस तालिका का हिस्सा जिसे उपयोगकर्ता को देखने की आवश्यकता होती है डीओएम में उत्पन्न होता है।

उदाहरण के लिए इन URL देखें:

http://datatables.net/examples/data_sources/js_array.html

या

http://datatables.net/examples/data_sources/ajax.html

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

http://datatables.net/examples/data_sources/server_side.html

संपादित करें: अनंत स्क्रॉल

टिप्पणियों में चर्चा के रूप में, समस्या इस तरह की नहीं है, बल्कि HTML तालिका को जेएस और पीछे परिवर्तित कर रही है। यह केवल लौटाए गए क्रम के प्रतिपादन भागों को लोड करके मदद कर सकता है क्योंकि उपयोगकर्ता इसे देखता है; सर्वर जेएसओएन फॉर्म में तालिका के समान जेएस को भी वही जानकारी प्रदान करता है। ये दो तकनीकें एचटीएमएल-जेएस रूपांतरण और प्रतिपादन समस्याओं को खत्म करती हैं, और इस प्रकार गति में काफी वृद्धि होती है।

एचटीएमएल (इस से पहले JSON साथ आता है कि शुरू में प्रदान की जा करने के लिए सभी है - के रूप में आप स्तंभ के रूप में कई वें टैग जोड़ने):

<table id="table_id"> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>etc</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

jQuery:

$(document).ready(function() { 
    $('#table_id').dataTable({ 
     "bScrollInfinite": true, 
     "bScrollCollapse": true, 
     "sScrollY": "200px", 
     "bProcessing": true, 
     "sAjaxSource": 'array.txt' 
    }); 
}); 

सरणी। txt शामिल हैं:

{ "aaData": [ 
    ["This will be in column 1","This in two","this in 3"], 
    ["another row - column 1","another two","another 3"] 
]} 

Answer 2

अलावा पुस्तकालयों से, टेबल छंटाई काफी अपने आप से यह करने के लिए आसान है।

वास्तव में पंक्तियों को क्रमबद्ध करने में लगने वाला समय डॉम को वस्तुओं को स्थानांतरित करने के समय के संबंध में नगण्य है।

एक चीज जो आपको सबसे अच्छा प्रदर्शन देगी, पंक्तियों को अलग करना है, उन्हें अपनी आवश्यकताओं के अनुसार व्यवस्थित करना और उन्हें फिर से संलग्न करना है। आपको कच्चे JSON डेटा की आवश्यकता नहीं है, केवल $ tr को अलग करें, उन मानों को पकड़ें जिन्हें आप टीडी से तुलना करना चाहते हैं, $ tr की सरणी बनाएं, इस सरणी को अपने इच्छित कॉलम के अनुसार सॉर्ट करें और उन्हें अपने टैब पर वापस संलग्न करें।

उदाहरण के लिए, इस तकनीक के साथ मैं 1 दूसरी बार 15 कॉलम की 3000 पंक्तियों को क्रमबद्ध कर रहा हूं, जो पूरी तरह व्यवहार्य है। उस प्रदर्शन के साथ, एकमात्र समस्या यह है कि ब्राउज़र में 3000 पंक्तियां कैसे प्राप्त करें ...