jQuery DataTables: kontrol tablosu genişliği

JQuery DataTables eklentisini kullanarak bir tablonun genişliğini kontrol etmekte sorun yaşıyorum. Tablonun kapsayıcı genişliğinin% 100'ü olması gerekir, ancak kap genişliğinden daha az, keyfi bir genişlik olur.

Öneriler takdir ediliyor

Tablo beyanı şuna benzer

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

Ve javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `  

HTML'yi Firebug'da incelerken bunu görürsünüz (eklenen style = "width: 0px;")

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

Stillere Firebug'a bakıldığında, table.display stili geçersiz kılındı. Bunun nereden geldiğini göremiyorum

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  

Sorunun nedeni, dataTable'ın genişliğini hesaplaması gerektiğidir - ancak bir sekme içinde kullanıldığında, görünmez, dolayısıyla genişlikleri hesaplayamaz. Çözüm, sekme gösterildiğinde 'fnAdjustColumnSizing' çağırmaktır.

Önsöz

Bu örnek, kaydırmalı DataTable'ların jQuery UI sekmeleriyle (veya aslında tablonun başlatıldığında gizli (display: none) öğesinde olduğu başka bir yöntemle) birlikte nasıl kullanılabileceğini gösterir. Bunun özel dikkat gerektirmesinin nedeni, Veri Tabloları başlatıldığında ve gizli bir öğede olduğunda, tarayıcının Veri Tablolarını verecek herhangi bir ölçümünün olmaması ve bu, kaydırma etkinleştirildiğinde sütunların yanlış hizalanmasını gerektirmesidir.

Bunu aşmanın yöntemi fnAdjustColumnSizing API işlevini çağırmaktır. Bu işlev, mevcut verilere göre gerekli olan sütun genişliklerini hesaplayacak ve ardından tabloyu yeniden çizecektir - bu, tablo ilk kez görünür olduğunda tam olarak ihtiyaç duyulan şeydir. Bunun için jQuery UI tabloları tarafından sağlanan 'göster' yöntemini kullanıyoruz. DataTable'ın oluşturulup oluşturulmadığını kontrol ederiz ('div.dataTables_scrollBody' için ekstra seçiciye dikkat edin, bu DataTable başlatıldığında eklenir). Tablo başlatılmışsa, yeniden boyutlandırırız. Tablonun yalnızca ilk gösteriminin yeniden boyutlandırılması için bir optimizasyon eklenebilir.

Başlatma kodu

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

Bkz bu daha fazla bilgi için.

DataTable'ları başlattığınızda iki değişkeni değiştirmek isteyeceksiniz: bAutoWidthveaoColumns.sWidth

50px, 100, 120px ve 30px genişliğinde 4 sütununuz olduğunu varsayarak yaparsınız:

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    }); 

DataTable'ların başlatılması hakkında daha fazla bilgi http://datatables.net/usage adresinde bulunabilir.

Bu geniş haklar ayarı ile uyguladığınız CSS arasındaki etkileşimi izleyin. Ne kadar yaklaştığınızı görmek için bunu denemeden önce mevcut CSS'nizi yorumlayabilirsiniz.

jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

Pekala, bu eklentiye aşina değilim, ancak datatable'ı ekledikten sonra stili sıfırlayabilir misiniz? Gibi bir şey

$("#querydatatablesets").css("width","100%")

.dataTable çağrısından sonra?

Veri tablolarının sütun genişlikleriyle ilgili çok sayıda sorun yaşadım. Benim için sihirli çözüm, çizgiyi dahil etmekti

table-layout: fixed;

bu css, tablonun genel CSS'si ile uyumludur. Örneğin, veri tablolarını aşağıdaki gibi tanımladıysanız:

LoadTable = $('#LoadTable').dataTable.....

daha sonra sihirli css satırı Loadtable sınıfına giderdi

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}

TokenMacGuys çözümü en iyi şekilde çalışır, çünkü bu jQdataTable'daki bir hatanın sonucudur. $ ['# Sometabe']. DataTable (). FnDestroy () kullanırsanız, tablo genişliği% 100 yerine 100px olarak ayarlanır. İşte hızlı bir düzeltme:

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });

Bu css sınıfını sayfanıza ekleyin, sorunu çözecektir:

#<your_table_id> {
    width: inherit !important;
}

Açıkça kullanılarak ayarlanması genişlikleri sWidthher sütun için VE bAutoWidth: falseiçinde dataTablebaşlatma benim (benzer) sorunu çözdü. Taşan yığını seviyorum.

Sabit alan olmadan en az bir alanı terk etmelisiniz, örneğin:

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

Hepsini değiştirebilirsin, ancak sadece birini boş bırakabilirsin, böylece genişleyebilir. TÜMÜNE genişlikler koyarsanız işe yaramaz. Umarım bugün birine yardım ettim!

"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

Bu, tüm masa genişliğini ayarlamak için iyi çalıştı. Teşekkürler @Peter Drinnan!

Datatable 10.1'de olduğu gibi, bu basittir. HTML'deki tablonuza genişlik özelliğini koymanız yeterlidir. yani genişlik = "% 100", bu, DT tarafından ayarlanan tüm CSS stillerini geçersiz kılar.

Bu http://www.datatables.net/examples/basic_init/f flexible_width.html bakın

Buradaki çözümlerin hiçbiri benim için işe yaramadı. Datatables ana sayfasındaki örnek bile göster seçeneğindeki datatable'ın başlatılması için işe yaramadı.

Soruna bir çözüm buldum. İşin püf noktası, sekmeler için etkinleştirme seçeneğini kullanmak ve görünür tabloda fnAdjustColumnSizing () öğesini çağırmaktır :

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
    activate: function (event, ui) {
        var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
        if (oTable.length > 0) {
            oTable.fnAdjustColumnSizing();
        }
    }
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
    "sScrollY": "200px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "aoColumnDefs": [
        { "sWidth": "10%", "aTargets": [-1] }
    ]
};
// initialize data table
$('table').dataTable(optDataTables);

});

Sadece JQuery'yi herhangi bir Ajax olmadan normal bir masaya uyguladığım halde, seninle tamamen aynı problemi yaşadığımı söylemek için. Bazı nedenlerden dolayı Firefox, tabloyu ortaya çıkardıktan sonra genişletmiyor. Tabloyu bir DIV'nin içine koyarak ve bunun yerine efektleri DIV'ye uygulayarak sorunu çözdüm.

Bunu hazır etkinliğinde mi yapıyorsun?

$ (belge) .ready (işlev () {...});

Boyutlandırma, büyük olasılıkla tam olarak yüklenen belgeye bağlı olacaktır.

Sabit başlık eklentisini kullanarak tablo / hücre genişliğini ayarlamada sorun yaşayan herkes için:

Veri tabloları, sütun genişliği parametreleri için thead etiketlerine dayanır. Bunun nedeni, tablonun iç html'sinin çoğu otomatik olarak oluşturulduğu için gerçekten tek yerel html olmasıdır.

Ancak, hücrenizin bir kısmı tead hücrelerinin içinde depolanan genişlikten daha büyük olabilir.

Örneğin, tablonuzda çok sayıda sütun varsa (geniş tablo) ve satırlarınızda çok fazla veri varsa, "sWidth" çağrısı: td hücre boyutunu değiştirmek düzgün çalışmaz çünkü alt satırlar taşmaya göre td'leri otomatik olarak yeniden boyutlandırıyor içerik ve bu , tablo başlatıldıktan ve init parametrelerini geçtikten sonra gerçekleşir .

Orijinal thead "sWidth": parametreler geçersiz kılınır (küçültülür) çünkü datatable'lar tablonuzun hala varsayılan genişliğinin% 100 olduğunu düşünür - bazı hücrelerin taştığını fark etmez.

Bunu düzeltmek için taşma genişliğini buldum ve tablo başlatıldıktan sonra tabloyu uygun şekilde yeniden boyutlandırarak hesaba kattım - biz oradayken aynı anda sabit başlığımızı da başlatabiliriz:

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});

sabit başlığınızı ajax çağrınızın "başarısı" içinde oluşturun, başlık ve satırlarda herhangi bir hizalama problemi yaşamazsınız.

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}        

Umarım bu, hala mücadele eden birine yardımcı olur.

Masanızı herhangi bir kap içinde tutmayın. Tablo oluşturulduktan sonra tablonun sarmalayıcısını kabınız yapın. Bunun, masayla birlikte başka bir şeyin olduğu yerlerde geçersiz olabileceğini biliyorum, ancak o zaman bu içeriği her zaman geri ekleyebilirsiniz.

Benim için bu sorun, bir kenar çubuğunuz ve aslında bu kenar çubuğunun ofset olan bir kabınız varsa ortaya çıkar.

$(YourTableName+'_wrapper').addClass('mycontainer');

(Bir panel paneli varsayılanı ekledim)
Ve sınıfınız:

.mycontainer{background-color:white;padding:5px;}

bu sorunla ilgili başka bir yararlı bağlantı buldum ve sorunumu çözdü.

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

Veri tabloları genişlik tablosu zorlar

Masanın etrafına bir div sarılıyken benzer bir sorunla karşılaştım.

Konum ekleniyor: göreli benim için düzeltildi.

#report_container {
 float: right;
 position: relative;
 width: 100%;
}

Tablonun içeriğinin tablo üstbilgisinden ve altbilgisinden daha büyük olduğu benzer bir sorun yaşadım. Tablonun etrafına bir div eklemek ve x-overflow'u ayarlamak bu sorunu çözmüş gibi görünüyor:

BAutoWidth & aoColumns'dan önceki diğer tüm parametrelerin doğru şekilde girildiğinden emin olun. Önceki herhangi bir yanlış parametre bu işlevi bozacaktır.

benzer bir sorun yaşadım ve sütunlardaki metnin kırılmadığını ve bu css kodunu kullanmanın sorunu çözdüğünü gördüm

th,td{
max-width:120px !important;
word-wrap: break-word
}

Bunu yapma şeklim bu ..

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});

Bugün aynı problemle karşılaşıyorum.

Çözmek için zor bir yol kullandım.

Kodum aşağıdaki gibidir.

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});

Bu çözümü de kontrol edin. bu, DataTable sütun genişliği sorunumu kolayca çözdü

JQuery DataTables 1.10.20, columns.adjust()Bootstrap geçiş sekmesi sorununu düzelten bir yöntem sunar

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

Lütfen dokümantasyona bakın: Kaydırma ve Önyükleme sekmeleri

Bu iyi çalışıyor.

#report_container {
   float: right;
   position: relative;
   width: 100%;
}