एचटीएमएल टेबल सॉर्ट

Question

तो मूल रूप से मैं एक mysql क्वेरी चला रहा हूं जो मेरे डेटाबेस से डेटा प्राप्त करता है और इसे मेरे उपयोगकर्ताओं के लिए पढ़ने के लिए आसान लेआउट में प्रदर्शित करता है। नाम ----- पता ---- विक्रेता की

आप सार मिलता है। और अब मैं उपयोगकर्ता को एचटीएमएल टेबल को सॉर्ट करना चाहता हूं, चलो बिक्री व्यक्ति कहें। ड्रॉप डाउन मेनू का उपयोग करके मैं आसानी से ऐसा कैसे करूं? यह मेरे पास अभी तक है .... मैं वास्तव में नहीं जानता कि मेनू तालिका को सॉर्ट करने के लिए मेनू को कैसे बताना है।

<div class='menu'> 
<ul> 
    <li><a href='#'><span>Sales Person</span></a> 
    <ul> 
    <li><a href='#'><span>Melissa</span></a></li> 
    <li><a href='#'><span>Justin</span></a></li> 
    <li><a href='#'><span>Judy</span></a></li> 
    <li><a href='#'><span>Skipper</span></a></li> 
    <li><a href='#'><span>Alex</span></a></li> 
    </ul> 
    </li> 
</div> 

किसी भी मदद की बहुत सराहना की जाती है।

Answer 1

जांचें कि क्या आप नीचे दिए गए किसी भी JQuery प्लगइन के साथ जा सकते हैं या नहीं। बस कमाल और काम करने के लिए विकल्पों की विस्तृत श्रृंखला प्रदान करते हैं, और एकीकृत करने के लिए कम दर्द। :)

http://tablesorter.com/docs/ - टेबल सॉर्टर।
https://github.com/paulopmx/Flexigrid - FlexGrid
http://datatables.net/index - डेटा तालिकाओं।
https://github.com/tonytomov/jqGrid

यदि नहीं, तो आप उन तालिका हेडर उस तरह आह्वान करने के लिए एक सर्वर साइड स्क्रिप्ट कॉल के लिए एक लिंक की आवश्यकता है।

Answer 2

बस एक 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>Name</th> 
      <th>Address</th> 
      <th>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: 'salesperson' 
}); 

में तरह सर्वर साइड:

आप जब <th> पर क्लिक सॉर्ट करने के लिए चाहते हैं, तो ऐसा करते हैं:

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

और एचटीएमएल पर इस संशोधित:

<th sort='name'>Name</th> 
<th sort='address'>Address</th> 
<th sort='salesperson'>Sales Person</th> 

Working example on fiddle