बूटस्ट्रैप-टेबल फ़िल्टर-कंट्रोल एक्सटेंशन पॉपुलटिंग विकल्पों की पूरी सूची के साथ चयन करें

Question

मैं अपने डेटाबेस से डेटा के साथ काम करने के लिए बूटस्ट्रैप-टेबल का उपयोग कर रहा हूं।

मैं पेजिनेशन सुविधाओं का उपयोग करता हूं और केवल सीमा और ऑफसेट विकल्पों का उपयोग करके उपयोगकर्ता द्वारा अनुरोध की गई पंक्तियों की संख्या वापस भेजता हूं।

मैं परिणामों के आसान फ़िल्टरिंग की अनुमति देने के लिए तालिका-नियंत्रण एक्सटेंशन का भी उपयोग कर रहा हूं। हालांकि जब मैं डेटा-फ़िल्टर-नियंत्रण = "चयन" के साथ फ़िल्टर करने के लिए चयन नियंत्रण का उपयोग करता हूं तो प्रविष्टियां केवल परिणामों के उस सेट के भीतर लौटती हैं।

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

जबकि मैं परिणामों के प्रत्येक फ़िल्टर किए गए सेट के साथ परिणामों को वापस भेज सकता हूं, शायद जेएसओएन के एक अलग तत्व में, नियंत्रण के बाद यह सूची लोड करना सबसे अच्छा होगा क्योंकि मुझे लगातार भेजने की आवश्यकता नहीं है प्रत्येक फिल्टर के साथ नियंत्रण के लिए डेटा का सेट।

क्या यह संभव है? क्या मैं इस सूची को मूल्यों के सेट के साथ प्रीलोड करने के लिए API का उपयोग कर सकता हूं?

गीथब पर एक मुद्दा है जो कि मेरे पास https://github.com/wenzhixin/bootstrap-table/issues/904 और एक पैच के नोट के समान समस्या का वर्णन करता है, लेकिन मुझे यकीन नहीं है कि इसे कैसे कार्यान्वित किया जाए।

मैं maxcdn.bootstrapcdn.com से बूटस्ट्रैप 3.3.4 का उपयोग कर रहा हूँ और मैं बूटस्ट्रैप-टेबल 1.8.1 का उपयोग कर रहा cdnjs.cloudflare.com

संपादित करें के माध्यम से: मैं इस FireBug उपयोग करने के बाद पता लगा है कदम अगर मैं ऐसा कर सकता हूं तो पता लगाने के लिए कोड लाइन के माध्यम से।

फ़िल्टर में डेटा की आपूर्ति के लिए दो विकल्प हैं। विशेषता डेटा-फ़िल्टर-डेटा को जोड़ें। आप एक "var" या "url" विकल्प का उपयोग अंडरस्कोर (या कुछ अन्य चरित्र जो त्याग दिया जाता है) के बाद कर सकते हैं और फिर "var" के मामले में इसे ऑब्जेक्ट नाम पास कर सकते हैं, मेरा यह डेटा-फ़िल्टर-डेटा = "var_OnlineValues" और मेरे ऑब्जेक्ट var ऑनलाइन values ​​= {"": "", "प्रारंभ": "प्रारंभ", "सबमिट": "सबमिट"}। मेरे पास सर्वर पर कुछ डेटा भी है जो मैं JSON के रूप में लौट रहा हूं। डेटा-फ़िल्टर-डेटा = "url_filename.php" और लौटाई गई वस्तु एक कुंजी/मान जोड़ी है।

मुझे उम्मीद है कि इससे मदद मिलती है।

Answer 1

प्रयोग जोड़ें data-filter-data स्तंभ के लिए गुण।

उदाहरण:

<script> 
var payment_methods = { 
    "PP": "PayPal - PP", 
    "CC": "PayPal - CC" 
}; 
</script> 

<th data-field="payment_method" data-sortable="true" data-filter-control="select" data-filter-data="var:payment_methods">Payment Method</th> 

वहाँ filterData विकल्प के लिए कोई दस्तावेज़ है, तो मैं कोड को पढ़ने के लिए किया था। मैंने नीचे प्रासंगिक भाग उद्धृत किया। substring(0,3) है और वैध मान url या var है। अगले चरित्र को नजरअंदाज कर दिया गया है।

यदि प्रकार url है तो यह AJAX कॉल को चुनिंदा विकल्पों में JSON प्रतिक्रिया को पॉप्युलेट करने के लिए बनाता है। संरचना सरल {कुंजी: मान} है।

यदि प्रकार var है तो यह window[filterDataSource] लगता है जो विकल्प द्वारा निर्दिष्ट वैश्विक चर है। डेटा संरचना सरल {कुंजी: मान} वस्तु है।

if (column.filterData !== undefined && column.filterData.toLowerCase() !== 'column') { 
     var filterDataType = column.filterData.substring(0, 3); 
     var filterDataSource = column.filterData.substring(4, column.filterData.length); 
     var selectControl = $('.' + column.field); 
     addOptionToSelectControl(selectControl, '', ''); 

     switch (filterDataType) { 
      case 'url': 
       $.ajax({ 
        url: filterDataSource, 
        dataType: 'json', 
        success: function (data) { 
         $.each(data, function (key, value) { 
          addOptionToSelectControl(selectControl, key, value); 
         }); 
        } 
       }); 
       break; 
      case 'var': 
       var variableValues = window[filterDataSource]; 
       for (var key in variableValues) { 
        addOptionToSelectControl(selectControl, key, variableValues[key]); 
       } 
       break; 
     } 
    } 

Answer 2

आपको यह काम करने के लिए बूटस्ट्रैप तालिका को संशोधित करने की आवश्यकता नहीं है। कॉलम की data-filter-data संपत्ति का उपयोग करके ड्रॉपडाउन में डिफ़ॉल्ट मान सेट करने का एक तरीका है। सिर के

: निम्नलिखित जोड़ने का प्रयास करें

<head> 
    // ... included scripts go here also 
    <script> 
     var filterDefaults = { 
      somekey: 'some string value', 
      anotherkey: 'another value' 
     }; 
    </script> 
</head> 

तो, स्तंभ के लिए data-filter-data:'var:filterDefaults' जोड़ें:

<table id="table" 
     data-toggle="table" 
     data-filter-control="true"> 
    <thead> 
     <tr> 
      <th data-field="id">ID</th> 
      <th data-field="name" data-filter-control="input">Item Name</th> 
      <th data-field="price" data-filter-control="select" data-filter-data="var:filterDefaults">Item Price</th> 
     </tr> 
    </thead> 
</table>