Jquery Tablesorter - <input> तत्वों

Question

मैं एक मेज इस तरह केवल सहायता की जरूरत स्तंभ द्वारा क्रमबद्ध करें:

| Update | Name | Code  | modification date | 
|   | name1 | code1  | 2009-12-09  | 
|   | name2 | otehercode | 2007-09-30  | 

कहाँ अद्यतन स्तंभ चेक बॉक्स <input type='checkbox' /> शामिल हैं।

चेकबॉक्स प्रारंभिक स्थिति तालिका को प्रस्तुत करने से पहले निर्धारित की जाती है, लेकिन पंक्तियों के बाद डेटाबेस से प्राप्त किया जाता है (यह सर्वर-पक्ष पर स्थितियों के सेट पर आधारित होता है)।

चेकबॉक्स डिफ़ॉल्ट रूप से चेक किया जा सकता है, डिफ़ॉल्ट या अक्षम (disabled='disabled'input विशेषता के रूप में अनचेक)।

मैं अपनी टेबल को सॉर्ट करने के लिए JQuery's Tablesorter का उपयोग कर रहा हूं। और मैं चेकबॉक्स वाले कॉलम द्वारा क्रमबद्ध करने में सक्षम होना चाहता हूं। यह कैसे संभव है (मैं अपने input तत्व में कुछ अतिरिक्त विशेषताओं को पास कर सकता हूं, अगर यह मदद करेगा ...)?
क्या मुझे इसे संभालने के लिए अपना खुद का पार्सर लिखना चाहिए?

Answer 1

इनपुट से ठीक पहले एक छुपा अवधि जोड़ें, और इसमें कुछ टेक्स्ट शामिल करें (जिसका उपयोग कॉलम को सॉर्ट करने के लिए किया जाएगा)। कुछ की तरह:

$(document).ready(function() { 

    $('#tableid input').click(function() { 
     var order = this.checked ? '1' : '0'; 
     $(this).prev().html(order); 
    }) 

}) 

नोट::

<td> 
    <span class="hidden">1</span> 
    <input type="checkbox" name="x" value="y"> 
</td> 

आवश्यक होने पर आप एक घटना चेकबॉक्स को इतना है कि यह पिछले भाई (अवधि) जब जाँच/अनियंत्रित की सामग्री को संशोधित करता है संलग्न कर सकते हैं मैं कोड की जांच नहीं की है, इसलिए इसमें त्रुटियां हो सकती हैं।

Answer 2

आप TableSorter के लिए एक कस्टम पार्सर जोड़ सकते हैं, इस तरह ख़ाली:

$.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
     // return false so this parser is not auto detected 
     return false; 
    }, 
    format: function(s) { 
     // Here we write custom function for processing our custum column type 
     return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
}); 

और फिर अपनी मेज

$("table").tablesorter(headers:{0:{sorter:input}}); 

Answer 3

यह अधिक पूर्ण/एचएएआरटी के जवाब का सही संस्करण है में इसका इस्तेमाल करते हैं।

$(document).ready(function() { 
    $.tablesorter.addParser({ 
     id: "input", 
     is: function(s) { 
      return false; 
     }, 
     format: function(s, t, node) { 
      return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0; 
     }, 
     type: "numeric" 
    }); 

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}}); 
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");}); 

}); 

Answer 4

मैं क्योंकि मैं नई सुविधाओं के साथ एक समर्थित/काँटेदार jQuery TableSorter पुस्तकालय का उपयोग कर रहा यह प्रतिक्रिया जोड़ रहा। इनपुट/चयन फ़ील्ड के लिए एक वैकल्पिक पार्सर लाइब्रेरी शामिल है।

http://mottie.github.io/tablesorter/docs/

यहाँ एक उदाहरण है: http://mottie.github.io/tablesorter/docs/example-widget-grouping.html और यह, इनपुट/चयन पार्सर पुस्तकालय "पार्सर-इनपुट-select.js" सहित एक हेडर वस्तु को जोड़ने और कॉलम और पार्स प्रकार की घोषणा के द्वारा किया जाता है।

headers: { 
    0: { sorter: 'checkbox' }, 
    3: { sorter: 'select' }, 
    6: { sorter: 'inputs' } 
} 

अतिरिक्त पारसर्स शामिल हैं: तारीख को पार्स (डब्ल्यू/चीनी & DateJS), ISO8601 की तारीख, महीने, 2 अंकों वर्ष, काम करने के दिन, दूरी (पैर/इंच & मीट्रिक) और शीर्षक प्रारूप (निकालता है 'ए' & "द")।

Answer 5

आप tablesorter jQuery प्लगइन का उपयोग और कहा कि सभी चेकबॉक्स कॉलम क्रमित करने में सक्षम है एक कस्टम पार्सर जोड़ सकते हैं: हारून के जवाब पूरा करने के लिए और ढेर अतिप्रवाह त्रुटियों से बचने के

$.tablesorter.addParser({ 
     id: 'checkbox', 
     is: function (s, table, cell) { 
      return $(cell).find('input[type=checkbox]').length > 0; 
     }, 
     format: function (s, table, cell) { 
      return $(cell).find('input:checked').length > 0 ? 0 : 1; 
     }, 
     type: "numeric" 
    }); 

Answer 6

बस एक अंतिम स्पर्श। इसलिए, उपर्युक्त वर्णित $.tablesorter.parser() कार्यक्षमता का उपयोग करने के अलावा, मुझे रनटाइम पर अपडेट किए गए चेकबॉक्स मानों के साथ काम करने के लिए अपने पृष्ठ में निम्नलिखित जोड़ना पड़ा।

var checkboxCahnged = false; 

    $('input[type="checkbox"]').change(function(){ 
     checkboxChanged = true; 
    }); 

    // sorterOptions is a variables that uses the parser and disables 
    // sorting when needed 
    $('#myTable').tablesorter(sorterOptions); 
    // assign the sortStart event 
    $('#myTable')..bind("sortStart",function() { 
     if (checkboxChanged) { 
      checkboxChanged = false; 
      // force an update event for the table 
      // so the sorter works with the updated check box values 
      $('#myTable')..trigger('update'); 
     } 
    }); 

Answer 7

<td align="center"> 
 
    <p class="checkBoxSorting">YOUR DATA BASE VALUE</p> 
 
    <input type="checkbox" value="YOUR DATA BASE VALUE"/> 
 
    </td>

//javascript 
 
$(document).ready(function() { 
 
$(".checkBoxSorting").hide(); 
 
});