jQuery टेबल हेडर सॉर्ट

Question

कोई भी प्लगइन के बारे में जानता है, या किसी तालिका में कॉलम को क्रमबद्ध करने के लिए फ़ंक्शन में बनाया गया है? यानी मैं कॉलम हेडर पर क्लिक करता हूं और यह उस कॉलम द्वारा पंक्तियों को टाइप करता है?

Answer 1

Ext JavaScript library उस पर बहुत अच्छा है।

Answer 2

http://tablesorter.com/docs/ आपकी आवश्यकताओं के अनुरूप विकल्पों की एक विस्तृत श्रृंखला के साथ उपयोग करना बहुत आसान है। :)

Answer 3

एक छोटी सी दिग्गज, लेकिन अंतिम jQuery तालिका प्रबंधक jqGrid

Answer 4

http://www.flexigrid.info/

है Flexigrid एक बहुत ही लोकप्रिय है, और आसान तालिका प्रबंधक/सॉर्टर उपयोग करने के लिए है।

Answer 5

यहाँ दो उस तरह है और साथ ही है कि मैं अभी तक सूचीबद्ध नहीं देखा कई अन्य बातें करते हैं:

• DataTables
• SlickGrid

यहाँ भी कई डेटा तालिकाओं की तुलना एक टेबल है: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

Answer 6

एक jquery प्लगइन जो सॉर्ट, फ़िल्टर और पेजिनेशन बनाता है: breedjs

उदाहरण:

करने के लिए एक js वस्तु में डेटा रखो तो बस की तरह:

var data = { 
    people: [ 
     {name: 'a', address: 'c', salesperson: 'b'}, 
     {name: 'b', address: 'b', salesperson: 'a'}, 
     {name: 'c', address: 'a', salesperson: 'c'}, 
    ] 
}; 

breed.run({ 
    scope: 'people', 
    input: data 
}); 

HTML:

<table> 
    <thead> 
     <tr> 
      <th sort='name'>Name</th> 
      <th sort='address'>Address</th> 
      <th sort='salesperson'>Sales Person</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr b-scope="people" b-loop="person in people"> 
      <td b-sort="name">{{person.name}}</td> 
      <td b-sort="address">{{person.address}}</td> 
      <td b-sort="salesperson">{{person.salesperson}}</td> 
     </tr> 
    </tbody> 
</table> 

अब, हर आप विक्रेता द्वारा सॉर्ट करने के लिए, चाहते हैं तो बस इसे कॉल करें:

breed.sort({ 
    scope: 'people', 
    selector: //field name 
}); 

देखें:

$("th").click(function(){ 
    breed.sort({ 
     scope: 'people', 
     selector: $(this).attr('sort') 
    }); 
}); 

Working example on fiddle