बूटस्ट्रैप बूटस्ट्रैप कैरोसेल

Question

के अंदर ट्रिगर नहीं हो रहा है मैं उत्तरदायी तालिकाओं के लिए Tablesaw plugin का उपयोग कर रहा हूं।

किसी बिंदु पर मुझे बूटस्ट्रैप कैरोसेल के विभिन्न आइटम/स्लाइड के अंदर अलग-अलग टेबल शामिल करने की आवश्यकता है।

लोड पर, कैरोसेल के सक्रिय आइटम पर तालिका सही ढंग से प्रदर्शित होगी (टेबल्सॉ ठीक से शुरू की गई है), लेकिन एक बार जब मैं अगली स्लाइड/आइटम पर जाता हूं, तो वहां की टेबल ठीक से प्रदर्शित नहीं होतीं (टेबल्सॉ नहीं शुरू)।

Tablesaw लोड पर आरंभ करने के लिए एक अतिरिक्त जे एस फ़ाइल में शामिल हैं:

$(function(){ 
    $(document).trigger("enhance.tablesaw"); 
}); 

यह पहली स्लाइड/मद के लिए है, लेकिन आराम के लिए नहीं काम करने के लिए लगता है।

यह क्यों हो रहा है पर कोई सुराग?

मैंने Plunker to illustrate the issue बनाया है।

Answer 1

समस्या Tablesaw इंटिलाइजेशन में है। सारणी के दौरान टेबल्स को जानना आवश्यक है (जो tablesaw-init.js में किया जाता है) तत्व का आकार। आपके पास बूटस्ट्रैप कैरोसेल के अंदर दो टेबल तत्व हैं, जबकि एक सक्रिय है और दूसरा नहीं है। जब आप कैरोसेल सीएसएस देखते हैं, तो आप देख सकते हैं कि display कैरोसेल आइटम की संपत्ति जो वर्तमान में सक्रिय नहीं है none पर सेट है। जिन तत्वों को प्रदर्शित नहीं किया गया है उनमें width और height0 पर सेट हैं।

तो समाधान यह करने के लिए फ़ाइल tablesaw-init.js अंदर कोड को बदलने जा सकता है:

;(function($) { 
    $(function(){ 
     // Show all carousel items before Tablesaw intialization 
     $(".carousel-inner > .item").css("display", "block"); 
     // Initialize the Tablesaw 
     $(document).trigger("enhance.tablesaw"); 
     // Remove the style added before initialization 
     $(".carousel-inner > .item").removeAttr("style"); 
    }); 
})(jQuery); 

इस बदलाव के बाद slid घटना को संभालने के लिए कोई जरूरत नहीं है।

यहाँ उल्लेख किया परिवर्तन के साथ अपने मूल कोड नमूना है, तो आप यह काम कर रहा है https://plnkr.co/edit/Ocd0axmKLS1KDtGYlU4K?p=preview

Answer 2

आप छिपा टेबल पर Tablesaw प्रारंभ नहीं कर सकते हैं देख सकते हैं।

;(function($) { 
    $(function(){ 
     // Initialize Tablesaw on the active carousel slide 
     $('#carousel-einzelwerte .item.active').trigger('enhance.tablesaw'); 
     // Initialize Tablesaw on slide change 
     $('#carousel-einzelwerte').on('slid.bs.carousel', function(e) { 
      $(e.relatedTarget).trigger('enhance.tablesaw'); 
     }); 
    }); 
})(jQuery); 

डेमो:: https://plnkr.co/edit/JxOnj6dJVcmpyBrzEzrs?p=preview