2013-04-18 17 views
12

ben evet ben Veri tablosunu kullanıyorum doğru yerde :)Kaydırma sorunu DataTable

rehberlik eğer soruyu tekrarlayarak ve Yatay Kaydırma uygulamak çalışıyorum emin değilim ve bu bağlantıyı bulundu

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

Bu özellikleri Veri Tablosu kodumda kullanıyorum ve kullanıcı arabiriminde sorun yaşıyorum.

Verilerim yatay kaydırma çubuğunu aldı, ancak sütunlarım genişlemedi ve beklendiği gibi çalışmıyordu. Normal sütunumun altında ek boş sütun var.

Temel olarak UI'm berbat. Aynı eski bir konu tartışmasını gördüm!

DataTables fixed headers misaligned with columns in wide tables

bu konular artık herhangi çözümleri Korunuyor?

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

örnek kod

$("#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

Post kodu:

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

Sonra .datatable-scroll sınıfa aşağıdaki stilleri uygulanmış . –

+0

örnek kod eklendi. – user2067567

+0

sütunları için herhangi bir açık genişlik ayarlamıyorum * Ne yazdınız? Yani, başka bir şey nedeni. Ayrıca, gerçekten "sScrollXInner" 'a ihtiyacınız olup olmadığını kontrol ettiniz: "% 110" '? Bu konuyla ilgili notu kontrol edin: * Ayrıca, sScrollXInner'ın masaya kesinlikle ihtiyaç duyulandan daha geniş olmasını zorlamak için kullanıldığını unutmayın. Uygulamanıza bağlı olarak bu parametreyi dahil etmek isteyebilirsiniz ya da olmayabilir. * –

cevap

22

ekleme Benzer bir sorunum vardı ama farklı bir şekilde çözdüm.

Fazladan div tabloyu sarmak için sDom parametreyi modifiye:

/** 
* 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

Çözümünüz müthiş. Scroll kafa ve vücut hizalama sorunuyla başa çıkmak için birçok çözümü test ettim, ancak hiçbir şey tüm tarayıcılarda işe yaramadı. Bu çözüm mükemmel, crossbrowser ve daha fazla hack aramaları ile javascript aşırı yüklenmez. (Başka bir örnekle biraz daha bilgi eklemek için cevabınızı düzenliyorum). Çok teşekkür ederim! :) – xtrm

+0

En iyi cevap, internette kaydırma için yorucu bir araştırmadan sonra buldu. Ancak, ** float: sol eklemek isteyebilirsiniz; genişlik: your-valuepx; konum: göreli; ** IE7 ve IE8 tarayıcıları ile uyumlu olacak şekilde .datatable-scroll sınıfı. Çünkü bu değerleri eklemeliydim. Ayrıca, sadece yatay kaydırma çubuğuna ihtiyacınız varsa, ** overflow-x: scroll kullanmanız gerekir; overflow-y: gizli; ** aksi takdirde IE'de yan etkiler verecektir. Neyse, çok teşekkürler dostum! –