तुलनात्मक ऑपरेटरों के साथ jQuery डेटाटेबल फ़िल्टर कॉलम

Question

मैं फ़िल्टर प्लग के साथ डेटाटेबल jQuery प्लगइन का उपयोग कर रहा हूं, और यह कमाल है। हालांकि, मैं सोच रहा था कि तालिका के निचले भाग में फ़िल्टर इनपुट में मान से पहले एक तुलना ऑपरेटर (उदा। '<' '>' or '<>') का उपयोग कर तालिका कॉलम को पंक्ति में फ़िल्टर करना संभव है।

http://www.datatables.net/plug-ins/filtering#functions

रेंज का उपयोग कर इनपुट फ़ील्ड है कि एक अधिकतम और न्यूनतम मान को स्वीकार आधार पर फ़िल्टर करना तरीका नहीं है। हालांकि, मैं दो अतिरिक्त इनपुट फ़ील्ड जोड़ना चाहता हूं और किसी भी तरह इस कॉलम के इनपुट को पार्स करना चाहता हूं।

जिस पंक्ति को मैं फ़िल्टर करना चाहता हूं वह केवल पूर्णांक (आयु) मानों के साथ आबादी है।

इच्छा व्यवहार के कुछ उदाहरण:

input  results 
< 20  less than than 20 
> 20  greater than 20 
20 - 80 between 20 and 80 
<> 20  not 20 

किसी को भी फिल्टर इस व्यवहार को प्राप्त करने के प्लगइन के व्यवहार को संशोधित करने के अनुभव है? धन्यवाद।

संपादित करें:

मैं सीधे इन इनपुट बॉक्स में तुलना ऑपरेटर में टाइप करने में सक्षम होना चाहते हैं। यदि एक ऑपरेटर का पता चला है तो यह ऑपरेटर के आधार पर फ़िल्टर करेगा। यदि कोई फ़िल्टर ऑपरेटर नहीं मिला है, तो मैं इसे सामान्य रूप से फ़िल्टर करना चाहता हूं।

फिल्टर इनपुट के लिए एचटीएमएल इस तरह दिखता है:

<tfoot> 
    <tr> 
     ... 
     <th class=" ui-state-default"> 
      <input type="text" class="search_init" value="Age" name="search_age"> 
     </th> 
     <th class=" ui-state-default"> 
      <input type="text" class="search_init" value="PD Status" name="search_age_of_onset"> 
     </th> 
     ... 
    </tr> 
</tfoot> 

धन्यवाद!

Answer 1

3 चरणों की जरूरत किया जाना चाहिए:

• यूआई बनाने
• एक फ़िल्टर समारोह लिखने
• सेटअप घटनाओं DataTable पुनः बनाने का जब यूआई बदलता है

पहले यूआई बनाने ।

<select id="filter_comparator"> 
    <option value="eq">=</option> 
    <option value="gt">&gt;=</option> 
    <option value="lt">&lt;=</option> 
    <option value="ne">!=</option> 
</select> 
<input type="text" id="filter_value"> 

अब, आप फ़िल्टर का समूह में एक समारोह पुश करने के लिए की जरूरत है: मेरे लिए, उपयोगकर्ता का ऐसा उद्देश्य कब्जा करने के लिए सबसे आसान तरीका है एक का चयन करें बॉक्स जहां उपयोगकर्ता चुन सकते हैं जो तुलना ऑपरेटर वह उपयोग करना चाहता है उपयोग करने के लिए है । फ़ंक्शन बस निर्दिष्ट तुलना ऑपरेटर को पकड़ता है और दर्ज किए गए मान के साथ पंक्ति डेटा की तुलना करने के लिए इसका उपयोग करता है। यदि कोई पंक्ति दिखाई देनी चाहिए और फ़िल्टर पर आधारित जाना चाहिए तो उसे गलत लौटना चाहिए। यदि उपयोगकर्ता वैध संख्या दर्ज नहीं करता है तो यह सच हो जाता है। column_index उचित मान में बदलें:

$(document).ready(function() { 
    var oTable = $('#example').dataTable(); 
    /* Add event listeners to the filtering inputs */ 
    $('#filter_comparator').change(function() { oTable.fnDraw(); }); 
    $('#filter_value').keyup(function() { oTable.fnDraw(); }); 
}); 

---

: बिंदु है जहां आप अपने DataTable बनाने में, अंत में

$.fn.dataTableExt.afnFiltering.push(
    function(oSettings, aData, iDataIndex) { 
    var column_index = 2; //3rd column 
    var comparator = $('#filter_comparator').val(); 
    var value = $('#filter_value').val(); 

    if (value.length > 0 && !isNaN(parseInt(value, 10))) { 

     value = parseInt(value, 10); 
     var row_data = parseInt(aData[column_index], 10); 

     switch (comparator) { 
     case 'eq': 
      return row_data == value ? true : false; 
      break; 
     case 'gt': 
      return row_data >= value ? true : false; 
      break; 
     case 'lt': 
      return row_data <= value ? true : false; 
      break; 
     case 'ne': 
      return row_data != value ? true : false; 
      break; 
     } 

    } 

    return true; 
    } 
); 

, अपने UI तत्व तालिका पुनः बनाने का पर सेटअप घटनाओं उपयोगकर्ता परिवर्तन करता है जब

अन्य हाथ पर, यदि आप चाहते हैं कि उपयोगकर्ता इसे चुनने के बजाय तुलना ऑपरेटर टाइप करें तो आपको उनके इनपुट को पार्स करना होगा।आप एक साधारण पाठ बॉक्स है, तो:

$.fn.dataTableExt.afnFiltering.push(
    function(oSettings, aData, iDataIndex) { 
     var filter = $('#filter').val().replace(/\s*/g, ''); 
     var row_data = aData[3] == "-" ? 0 : aData[3]*1; 

     if (filter.match(/^<\d+$/)) { 
      var num = filter.match(/\d+/); 
      return row_data < num ? true : false; 
     } 
     else if (filter.match(/^>\d+$/)) { 
      var num = filter.match(/\d+/); 
      return row_data > num ? true : false; 
     } 
     else if (filter.match(/^<>\d+$/)) { 
      var num = filter.match(/\d+/); 
      return row_data != num ? true : false; 
     } 
     else if (filter.match(/^\d+$/)) { 
      var num = filter.match(/\d+/); 
      return row_data == num ? true : false; 
     } 
     else if (filter.match(/^\d+-\d+$/)) { 
      var num1 = filter.match(/^\d+/); 
      var num2 = filter.match(/\d+$/); 
      return (row_data >= num1 && row_data <= num2) ? true : false; 
     } 
     return true; 
    } 
); 

और तैयार एक दस्तावेज:

<input type="text" id="filter"> 

तो फिर तुम इस प्रकार का फ़िल्टर समारोह में इनपुट पार्स कर सकते हैं केवल

$(document).ready(function() { 
    var oTable = $('#example').dataTable(); 
    /* Add event listeners to the filtering inputs */ 
    $('#filter').keyup(function() { oTable.fnDraw(); }); 
}); 

इस फिल्टर सकारात्मक पूर्णांक पर काम करता है। दशमलव और नकारात्मक संख्या समर्थन के लिए अधिक काम की आवश्यकता होगी। आप अपने उपयोगकर्ता अपेक्षाओं के आधार पर> = और < = समर्थन जोड़ने के लिए फ़ंक्शन का विस्तार भी कर सकते हैं, या केवल उन्हें> और < के लिए डिफ़ॉल्ट व्यवहार कर सकते हैं।

मैंने एक बार फिर ईवेंट श्रोता को एक निःशुल्क फ़्लोटिंग इनपुट टेक्स्ट बॉक्स में संलग्न किया है। मैंने इसे मूल डेटाटेबल के साथ आजमाया है और यह काम करता है। आपको अपने कॉलम के नीचे उन टेक्स्ट बॉक्स में व्यवहार संलग्न करना होगा, लेकिन मुझे यकीन नहीं है कि आपने उन्हें वहां कैसे पहुंचाया - मैंने कभी डेटाटेबल के साथ ऐसा नहीं किया है।