मैं ट्विटर बूटस्ट्रैप के साथ सॉर्ट करने में सक्षम टेबल कैसे बना सकता हूं?

Question

मैं जानना चाहता हूं कि मैं अपनी तालिका को ट्विटर बूटस्ट्रैप के साथ सॉर्ट करने में सक्षम कैसे हो सकता हूं? क्या विचार किया जाना चाहिए?

Answer 1

आपको jQuery और dataTable.js का उपयोग करने की आवश्यकता है।

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example"> 

प्रदर्शन ग्रिड: आधी चौड़ाई तत्वों को निरूपित करने के, पहले हम इस्तेमाल किया था "span8" तत्वों DataTables नियंत्रण तत्वों के लिए ग्रिड लेआउट परिभाषित करने के लिए है, लेकिन 12 से परिवर्तन के साथ

एक उदाहरण देखते हैं बूटस्ट्रैप में कॉलम हमें बस "span6" का उपयोग करने के लिए बदलने की जरूरत है। इसलिए हमारे DataTables initialisation लगता है:

$(document).ready(function() { 
    $('#example').dataTable({ 
     "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>" 
    }); 
}); 

हम यह भी आदेश फार्म तत्वों एक ब्लॉक के रूप में के बजाय इनलाइन प्रदर्शित करने के लिए में तत्व आवरण DataTables पर एक नया वर्ग निर्धारित करने की आवश्यकता (टेबल छानने इनपुट और लंबाई चयनकर्ता हैं । इस से प्रभावित ऐसा करने के लिए हम बस DataTable के लिए "sWrapper" वर्ग विकल्प का विस्तार:

$.extend($.fn.dataTableExt.oStdClasses, { 
    "sWrapper": "dataTables_wrapper form-inline" 
}); 

छंटाई बूटस्ट्रैप वी 2 एक मेज पुस्तकालय के रूप में TableSorter का समर्थन समाप्त हो गया है और एक परिणाम के रूप छँटाई कक्षाएं हटा दिया गया है इस तरह हमें अपनी खुद की तरह की स्टाइल को परिभाषित करने की ज़रूरत है, जिसे हम वास्तव में कर सकते हैं एएमई जिस तरह से हम DataTables के अपने सीएसएस फ़ाइलों में करते हैं (चित्र/छवियों मीडिया में DataTables वितरण ज़िप फ़ाइल में उपलब्ध हैं):

table.table thead .sorting, 
table.table thead .sorting_asc, 
table.table thead .sorting_desc, 
table.table thead .sorting_asc_disabled, 
table.table thead .sorting_desc_disabled { 
    cursor: pointer; 
    *cursor: hand; 
} 

table.table thead .sorting { background: url('images/sort_both.png') no-repeat center right; } 
table.table thead .sorting_asc { background: url('images/sort_asc.png') no-repeat center right; } 
table.table thead .sorting_desc { background: url('images/sort_desc.png') no-repeat center right; } 

table.table thead .sorting_asc_disabled { background: url('images/sort_asc_disabled.png') no-repeat center right; } 
table.table thead .sorting_desc_disabled { background: url('images/sort_desc_disabled.png') no-repeat center right; } 

साफ अप अंत में वहाँ अपने एकीकरण सीएसएस करने के लिए दो संशोधनों 1.4 से हैं हमारी स्टाइल को पूरा करने के लिए फ़ाइल:

डेटा से चौड़ाई निकालें Tables_length और dataTables_filter कक्षाएं। बूटस्ट्रैप में अपडेट का मतलब है कि इनकी अब आवश्यकता नहीं है। तालिका तालिका जो मैंने पहले की थी "मार्जिन: 1em 0;" लेकिन वह बदलता है, दृश्य प्रवाह अब "मार्जिन-तल: 6 पीएक्स! महत्वपूर्ण" के साथ बेहतर है;

चेक this संदर्भ

Answer 2

एक library कि बूटस्ट्रैप तालिकाओं के साथ छँटाई की क्षमता प्रदान करता है नहीं है।

यहां इसका उपयोग करने के लिए quick demonstration है।

HTML:

<table class="table table-bordered table-striped sortable"> 
    <thead> 
     <tr> 
     <th data-defaultsign="month" data-sortcolumn="1" data-sortkey="1-1"> 
     Date 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td data-dateformat="D-M-YYYY">16.4.2004</td> 
    </tr> 
    <tr> 
     <td data-dateformat="D-M-YYYY">6.7.2002</td> 
    </tr> 
    <tr> 
     <td data-dateformat="D-M-YYYY">4.4.2004</td> 
    </tr> 
    <tr> 
     <td data-dateformat="D-M-YYYY">6.6.2012</td> 
    </tr> 
    </tbody> 
</table> 

जे एस:

(function() { 
    var $table = $('table'); 
    $table.on('sorted', function() { 
     console.log("Table was sorted."); 
    }); 
}()); 

HTH।