2013-04-18 7 views
12

मुझे यकीन है कि अगर मैं सवाल दोहरा रहा हूँ यदि हाँ सही जगह :)स्क्रॉल मुद्दा DataTable

मैं डेटा तालिका का उपयोग कर रहा करने के लिए मार्गदर्शन और क्षैतिज स्क्रॉल को लागू करने की कोशिश नहीं कर रहा हूँ और इस लिंक मिल गया

http://www.datatables.net/examples/basic_init/scroll_x.html

मैंने इन गुणों का उपयोग अपने डेटा टेबल कोड में किया और मुझे यूआई में समस्याएं आईं।

मेरा डेटा क्षैतिज स्क्रॉल बार मिला लेकिन मेरे कॉलम विस्तारित नहीं हुए और उम्मीद के अनुसार काम नहीं कर रहे थे। मुझे अपने सामान्य कॉलम के नीचे अतिरिक्त खाली कॉलम मिला।

मूल रूप से मेरा यूआई गड़बड़ हो गया है। मैंने उसी पर एक पुरानी धागा चर्चा देखी!

DataTables fixed headers misaligned with columns in wide tables

इन मुद्दों अब किसी भी समाधान तय कर रहे हैं?

================================

नमूना कोड

$("#results").dataTable({ 
    "aaData": [ 
     //My data 
    ], 
    "aoColumns": [ 
     //My Columns 
    ], 
    "bPaginate": true, 
    "bSort": true, 
    "bFilter": false, 
    "bJQueryUI": false, 
    "bProcessing": true, 
    "sScrollX": "100%", 
    "sScrollXInner": "110%", 
    "bScrollCollapse": true 
}); 
+1

पोस्ट अपने कोड:

sDom: 'r<"H"lf><"datatable-scroll"t><"F"ip>', 

मैं तो .datatable-scroll वर्ग के लिए निम्न शैली लागू । –

+0

जोड़ा नमूना कोड। कॉलम – user2067567

+0

के लिए कोई स्पष्ट चौड़ाई निर्धारित नहीं कर रहा हूं * आपने जो पोस्ट किया है * में कुछ भी गलत नहीं है। तो, कुछ और कारण है। साथ ही, क्या आपने वास्तव में जांच की है कि आपको वास्तव में "sScrollXInner" की आवश्यकता है: "110%" '? इस प्रॉपर्टी के बारे में नोट देखें: * यह भी ध्यान दें कि एसएसक्रॉलएक्सइनर का उपयोग टेबल को सख्ती से जरूरी होने के लिए मजबूर करने के लिए किया जाता है। आप अपने आवेदन के आधार पर इस पैरामीटर को शामिल नहीं कर सकते हैं या नहीं। * –

उत्तर

22

जोड़ना मेरे पास एक समान समस्या थी, लेकिन इसे एक अलग तरीके से हल किया।

मैं एक अतिरिक्त div में मेज रैप करने के लिए sDom पैरामीटर संशोधित:

/** 
* Makes the table have horizontal scroll bar if its too wide for its container 
*/ 
.datatable-scroll { 
    overflow-x: auto; 
    overflow-y: visible; 
} 

http://datatables.net/usage/options#sDom

+1

आपका समाधान शानदार है। मैं स्क्रॉल हेड और बॉडी संरेखण के मुद्दे से निपटने के लिए कई सारे समाधानों का परीक्षण कर रहा हूं लेकिन सभी ब्राउज़रों में कुछ भी काम नहीं किया है। यह समाधान सही है, crossbrowser और अधिक हैक कॉल के साथ जावास्क्रिप्ट अधिभार नहीं है। (मैं एक और उदाहरण के साथ थोड़ा और जानकारी जोड़ने के लिए अपना जवाब संपादित कर रहा हूं)। आपको बहुत - बहुत धन्यवाद! :) – xtrm

+0

स्क्रॉल के लिए इंटरनेट पर एक थकाऊ शोध के बाद अब तक का सबसे अच्छा जवाब मिला। लेकिन, आप ** फ्लोट जोड़ना चाहेंगे: बाएं; चौड़ाई: आपका-वैल्यूएक्सएक्स; स्थिति: सापेक्ष; ** .datatable-scroll क्लास में ताकि IE7 और IE8 ब्राउज़र के साथ संगत हो सके। क्योंकि मुझे इन मूल्यों को जोड़ना पड़ा था। इसके अलावा, अगर आपको केवल क्षैतिज स्क्रॉल बार की आवश्यकता है, तो आपको ** ओवरफ्लो-एक्स: स्क्रॉल का उपयोग करना होगा; ओवरफ्लो-वाई: छुपा; ** अन्यथा यह आईई में दुष्प्रभाव देगा। वैसे भी, बहुत दोस्ताना धन्यवाद !! –

संबंधित मुद्दे