2013-08-29 5 views
5

मेरे पास मेरे वेब पेज में datatable है। मुझे तालिका के शीर्ष पर horizontal scroll bar प्रदर्शित करने की आवश्यकता है। मैंने table.wrap('<div style="width:980px; overflow-x:auto;"/>'); की कोशिश की है। यह तालिका के नीचे क्षैतिज स्क्रॉल बार प्रदर्शित करता है। डेटा तालिका के शीर्ष पर स्क्रॉलबार कैसे प्रदर्शित करें। कोई मदद?शीर्ष क्षैतिज स्क्रॉलबार डेटाटेबल जावास्क्रिप्ट

+0

चेक इस, http://jsfiddle.net/TBnqw/1/ –

+0

मैंने कोशिश की। लेकिन यह डेटाटेबल के साथ काम नहीं कर रहा है जो अजाक्स द्वारा भरा हुआ है। – lifeline

+0

हाय - क्या आपने कभी यह पता लगाया है? मुझे एक ही समस्या है। धन्यवाद! –

उत्तर

2

आपको http://progrnotes.blogspot.com.ee/2013/07/horizontal-scrollbars-at-top-bottom-in-datatables.html पर उत्तर मिल गया है: आप इसे jQuery-doubleScroll प्लगइन (https://github.com/sniku/jQuery-doubleScroll) के साथ कर सकते हैं। हालांकि, यह डेटाटेबल के साथ काम नहीं कर रहा है जो अजाक्स द्वारा लोड किया जाता है। आपको इसे थोड़ा छोटा करने की जरूरत है।

कदम करने के लिए इस तरह हैं:

  1. डाउनलोड करें और doubleScroll शामिल हैं।

  2. जोड़े लाइनों:

    $('body').find('.dataTables_scrollBody').wrap('<div id="scroll_div"></div>'); 
    $('#scroll_div').doubleScroll(); 
    
  3. जोड़े सीएसएस

    .dataTables_scrollBody { 
        overflow-y: visible !important; 
        overflow-x: initial !important; 
    } 
    

    कि यह (DataTables 1.10.7)

संपादित करना चाहिए: अगर आपके पास स्तंभ पर फिल्टर शीर्ष पर उपरोक्त समाधान को संशोधित करने की आवश्यकता है, अन्यथा शीर्षलेख स्क्रॉल नहीं करेंगे:

  1. जोड़े लाइनों:

    $('body').find('.dataTables_scroll').wrap('<div id="scroll_div"></div>'); 
    $('#scroll_div').doubleScroll(); 
    
  2. CSS जोड़

    .dataTables_scrollBody { 
        overflow-y: visible !important; 
        overflow-x: initial !important; 
    } 
    .dataTables_scrollHead { 
        overflow: visible !important; 
    } 
    
संबंधित मुद्दे