jQuery DataTables: mengontrol lebar tabel

98

Saya memiliki masalah dalam mengontrol lebar tabel menggunakan plugin jQuery DataTables. Tabel seharusnya berukuran 100% dari lebar penampung, tetapi akhirnya menjadi lebar yang berubah-ubah, bukan kurang dari lebar penampung.

Saran dihargai

Deklarasi tabel terlihat seperti ini

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

Dan javascript

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

Memeriksa HTML di Firebug, Anda melihat ini (perhatikan gaya yang ditambahkan = "width: 0px;")

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

Melihat gaya Firebug, gaya table.display telah diganti. Tidak bisa melihat dari mana asalnya

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  
John Mac
sumber
FYI, saya baru saja mengalami masalah di mana kolom tidak menyesuaikan dengan benar di IE8. Pelakunya adalah gambar yang memiliki max-widthset properti. Jelas IE8 tidak terlalu menyukai properti itu dan mengabaikannya dalam kaitannya dengan tabel data, meskipun gambar itu berukuran tepat di layar. Mengubahnya untuk widthmemperbaiki masalah.
John Bubriski

Jawaban:

61

Masalah ini disebabkan karena dataTable harus menghitung lebarnya - tetapi ketika digunakan di dalam tab, itu tidak terlihat, sehingga tidak dapat menghitung lebarnya. Solusinya adalah dengan memanggil 'fnAdjustColumnSizing' saat tab muncul.

Pembukaan

Contoh ini menunjukkan bagaimana DataTables dengan scrolling dapat digunakan bersama dengan tab jQuery UI (atau memang metode lain di mana tabel berada dalam elemen tersembunyi (display: none) saat diinisialisasi). Alasan hal ini memerlukan pertimbangan khusus, adalah bahwa ketika Tabel Data diinisialisasi dan berada dalam elemen tersembunyi, browser tidak memiliki pengukuran untuk memberikan Tabel Data, dan ini akan memerlukan ketidaksejajaran kolom saat pengguliran diaktifkan.

Metode untuk menyiasatinya adalah dengan memanggil fungsi API fnAdjustColumnSizing. Fungsi ini akan menghitung lebar kolom yang diperlukan berdasarkan data saat ini dan kemudian menggambar ulang tabel - persis seperti yang dibutuhkan saat tabel terlihat untuk pertama kalinya. Untuk ini kami menggunakan metode 'show' yang disediakan oleh tabel jQuery UI. Kami memeriksa untuk melihat apakah DataTable telah dibuat atau tidak (perhatikan pemilih ekstra untuk 'div.dataTables_scrollBody', ini ditambahkan ketika DataTable diinisialisasi). Jika tabel telah diinisialisasi, kami mengubah ukurannya. Pengoptimalan dapat ditambahkan ke ukuran ulang hanya dari tampilan pertama tabel.

Kode inisialisasi

$(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 ] }
        ]
    } );
} );

Lihat ini untuk info lebih lanjut.

Arik Kfir
sumber
1
Saya juga memiliki masalah yang sama dengan @John McC, namun, saya menerapkan datatable saya ke sebuah modal, saya menggunakan bootstrap dan saya terjebak dengan masalah ini .. apakah Anda tahu cara menerapkannya menggunakan modal bootstrap daripada tab ?. . saya benar-benar membutuhkan bantuan Anda
cfz
saya sarankan untuk menggunakan window.resize, lihat contoh legacy.datatables.net/ref#fnAdjustColumnSizing
KingRider
"aoColumnDefs": [{"sWidth": "10%", "aT Target": [-1]}]. Saya memperbaiki masalah saya tambahkan saja ini, terima kasih.
Mina chen
55

Anda akan ingin mengubah dua variabel saat Anda menginisialisasi dataTables: bAutoWidthdanaoColumns.sWidth

Dengan asumsi Anda memiliki 4 kolom dengan lebar 50px, 100, 120px dan 30px, Anda akan melakukan:

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

Informasi lebih lanjut tentang inisialisasi dataTables dapat ditemukan di http://datatables.net/usage

Perhatikan interaksi antara pengaturan widhts dan CSS yang Anda terapkan. Anda dapat mengomentari CSS yang ada sebelum mencoba ini untuk melihat seberapa dekat Anda.

artlung
sumber
mmm. Apa yang Anda katakan adalah bahwa ini adalah hasil dari bAutoWidth: true membuat pilihan yang tidak terlalu cerdas untuk lebar kolom.
John Mac
Ini yang saya pikirkan. Tabel saya terpental jika datanya tidak konsisten panjangnya. Inilah mengapa saya memasukkan parameter aoColumns dan bAutoWidth.
artlung
1
Cantik. benar-benar memperbaiki masalah saya.
Laguna
Luar biasa @Laguna! Senang mendengar jawaban lama seperti ini terus membantu.
artlung
1
"bAutoWidth": karya palsu. Tapi hanya sebuah pertanyaan. Apakah ini praktik yang baik atau tidak jika saya meletakkan detail lebar pada tag <th> saya?
finnTheHumin
52
jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});
Suraj
sumber
2
Ini adalah jawaban yang tepat untuk saya. Saya menggunakan boostrap .table-responsive. Dengan pengaturan kode yang dapat didata, lebarnya sendiri, itu menghalangi.
mac10688
Datang ke sini untuk memposting solusi saya untuk masalah bodoh ini yang melibatkan penghapusan properti lebar pada acara perubahan tab tetapi ini tampaknya telah memperbaikinya. Terima kasih. +1
Topher
Saya memiliki 3 tab dan tabel data pada dua tab pertama, tabel pada tab kedua tidak lebar penuh. ini memperbaiki masalah saya. terima kasih
Mike Volmar
47

Yah, saya tidak terbiasa dengan plugin itu, tetapi bisakah Anda mengatur ulang gayanya setelah menambahkan datatable? Sesuatu seperti

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

setelah panggilan .dataTable?

SingleNegationElimination
sumber
1
Saya telah menemukan ini sebagai solusi terbaik juga, karena dalam kasus saya, tabel juga disetel ke lebar 100px ketika salah satu kolom dibuat tidak terlihat - lihat di sini: datatables.net/forums/discussion/3417/…
mydoghasworms
Ini adalah solusi yang berhasil untuk saya. itu memberikan kontrol yang lebih baik atas css dari tabel data dibandingkan dengan oTable.fnAdjustColumnSizing (); solusi yang disebutkan sebelumnya.
Vijay Rumao
11

Saya memiliki banyak masalah dengan lebar kolom tabel data. Perbaikan ajaib bagi saya termasuk garis

table-layout: fixed;

css ini sesuai dengan css tabel secara keseluruhan. Misalnya, jika Anda telah mendeklarasikan datatables seperti berikut:

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

maka baris css ajaib akan masuk ke kelas Loadtable

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

}

pengguna1842675
sumber
2
Ini membantu, tetapi sekarang kolom saya semuanya berukuran aneh. Saya berharap bahwa kolom dengan data paling banyak akan mengambil lebar persentase terbesar.
cjbarth
7

Solusi TokenMacGuys bekerja paling baik karena ini adalah hasil dari bug di jQdataTable. Apa yang terjadi adalah jika Anda menggunakan $ ('# sometabe'). DataTable (). FnDestroy () lebar tabel disetel ke 100px alih-alih 100%. Berikut ini perbaikan cepatnya:

$('#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%");
        }

    });
Peter Drinnan
sumber
6

Tambahkan kelas css ini ke halaman Anda, itu akan memperbaiki masalah:

#<your_table_id> {
    width: inherit !important;
}
Bahadir Tasdemir
sumber
1
Saya memiliki masalah terpisah yang telah saya perjuangkan selama 30 menit terakhir - baris kode ini memperbaikinya - jadi saya hanya ingin mengucapkan terima kasih atas komentar acak ini.
pengguna1274820
1
Inilah mengapa saya memberikan jawaban tambahan
Bahadir Tasdemir
5

Mengatur lebar secara eksplisit menggunakan sWidthuntuk setiap kolom DAN bAutoWidth: falsedalam dataTableinisialisasi memecahkan masalah saya (serupa). Suka tumpukan yang meluap.

tubelight
sumber
5

Anda harus meninggalkan setidaknya satu bidang tanpa bidang tetap, misalnya:

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

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

Anda dapat mengubah semua, tetapi biarkan hanya satu sebagai nol, sehingga dapat meregang. Jika Anda meletakkan lebar pada SEMUA itu tidak akan berhasil. Semoga saya membantu seseorang hari ini!

menyembuhkan85
sumber
1
Itu untuk saya, saya mengatur semua kolom menjadi 1px. Meninggalkan satu membuatnya bekerja secara ajaib. Terima kasih!
demoncodemonkey
4
"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

Ini bekerja dengan baik untuk menyesuaikan lebar tabel secara keseluruhan. Terima kasih @Peter Drinnan!

Nilani Algiriyage
sumber
Saya tidak bisa mendapatkan tabel untuk mengisi wadah induknya dengan benar. Mencoba menyesuaikan css tabel dan pembungkusnya menjadi lebar: 100%; tanpa perbedaan yang mencolok. Setelah saya mencoba metode yang disebutkan di atas, itu bekerja dengan sangat baik, namun saya tidak menunjuk ke pembungkusnya, sebaliknya saya harus menunjuk ke tabel itu sendiri. Tapi terima kasih banyak Nilani !!
Logika1
3

Tidak ada solusi di sini yang berhasil untuk saya. Bahkan contoh di beranda datatables tidak berfungsi karenanya ke inisialisasi datatable dalam opsi pertunjukan.

Saya menemukan solusi untuk masalah tersebut. Triknya adalah dengan menggunakan opsi aktifkan untuk tab dan memanggil fnAdjustColumnSizing () pada tabel yang terlihat :

$(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);

});
Helmut Steiner
sumber
2

Hanya untuk mengatakan saya memiliki masalah yang persis sama dengan Anda, meskipun saya baru saja menerapkan JQuery ke tabel normal tanpa Ajax. Untuk beberapa alasan Firefox tidak memperluas tabel setelah memunculkannya. Saya memperbaiki masalah dengan meletakkan tabel di dalam DIV, dan menerapkan efek ke DIV sebagai gantinya.

Dave
sumber
2

Apakah Anda melakukan ini dalam acara yang sudah siap?

$ (dokumen) .ready (function () {...});

Ukurannya kemungkinan besar akan tergantung pada dokumen yang dimuat sepenuhnya.

Mufaka
sumber
lihat kode di atas - ini terjadi di callback dari ajax load dari wadah div # tab-dataset. Tabel #querytableDatasets disediakan oleh / cgi-bin / qryDatasets
John Mac
Saya mengerti itu, saya tidak yakin waktu untuk itu terjadi. Dalam melihat sumber plugin, sepertinya satu-satunya waktu itu dapat mengatur lebar 0px adalah ketika tidak dapat menentukan tabel offSetWidth yang benar dan saya pikir itu terkait dengan berjalan terlalu dini.
Mufaka
hmm. Saya berasumsi bahwa callback dari ajax load dipanggil setelah tabel #querytableDatasets dimuat. Apakah menurut Anda hal ini mungkin tidak terjadi?
John Mac
BTW untuk menjawab pertanyaan Anda tentang kapan ini berjalan, itu sebagai tanggapan terhadap pengguna yang mengklik tombol
John Mac
Hmm, tidak yakin saya bisa menambahkan apa-apa lagi. Jika itu adalah klik tombol, maka dokumen akan terisi penuh dan tidak ada alasan untuk meletakkan ini di acara siap. Anda mungkin bermain-main dengan lebar wadah tabel atau mencoba untuk membuat (plugin DataTables) bekerja di luar tata letak Anda saat ini.
Mufaka
1

Bagi siapa pun yang kesulitan menyesuaikan lebar tabel / sel menggunakan plugin header tetap:

Tabel data bergantung pada tagad untuk parameter lebar kolom. Ini karena ini benar-benar satu-satunya html asli karena sebagian besar html bagian dalam tabel dibuat secara otomatis.

Namun, yang terjadi adalah beberapa sel Anda bisa lebih besar dari lebar yang disimpan di dalam sel iklan.

Yaitu jika tabel Anda memiliki banyak kolom (tabel lebar) dan baris Anda memiliki banyak data, maka memanggil "sWidth": untuk mengubah ukuran sel td tidak akan berfungsi dengan baik karena baris anak secara otomatis mengubah ukuran td berdasarkan overflow konten dan ini terjadi setelah tabel diinisialisasi dan melewati parameter initnya.

Thead asli "sWidth": parameter diganti (menyusut) karena tabel data menganggap tabel Anda masih memiliki lebar default% 100 - ia tidak mengenali bahwa beberapa sel meluap.

Untuk memperbaikinya, saya menemukan lebar overflow dan memperhitungkannya dengan mengubah ukuran tabel sesuai setelah tabel diinisialisasi - sementara kita melakukannya, kita dapat memasukkan header tetap kita pada saat yang sama:

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

buat fixedheader Anda di dalam "keberhasilan" panggilan ajax Anda, Anda tidak akan mengalami masalah penyelarasan di header dan baris.

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

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

        new $.fn.dataTable.FixedHeader(table);
}        
Chandra Sekhar beluduru
sumber
1

Semoga ini membantu seseorang yang masih berjuang.

Jangan simpan meja Anda di dalam wadah apa pun. Jadikan pembungkus tabel sebagai wadah Anda setelah tabel dirender. Saya tahu ini mungkin tidak valid di tempat di mana Anda memiliki sesuatu yang lain bersama dengan tabel tetapi kemudian Anda selalu dapat menambahkan kembali konten itu.

Bagi saya, masalah ini muncul jika Anda memiliki sidebar dan container yang sebenarnya merupakan offset ke sidebar tersebut.

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

(Saya menambahkan panel panel-default)
Dan kelas Anda:

.mycontainer{background-color:white;padding:5px;}
abcdefghiraj.dll
sumber
1

temukan tautan lain yang berguna tentang masalah ini dan itu menyelesaikan masalah saya.

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

Tabel lebar gaya tabel data

Chuanzhou Tang
sumber
0

Saya mengalami masalah serupa saat div melilit meja.

Menambahkan posisi: relatif memperbaikinya untuk saya.


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

Saya mengalami masalah serupa di mana isi tabel lebih besar dari header dan footer tabel. Menambahkan div di sekitar tabel dan menyetel x-overflow tampaknya telah menyelesaikan masalah ini:

Nick Holden
sumber
0

Pastikan semua parameter lain sebelum bAutoWidth & aoColumns dimasukkan dengan benar. Parameter yang salah sebelumnya akan merusak fungsionalitas ini.

DejanR
sumber
0

saya memiliki masalah yang sama dan menemukan bahwa teks di kolom tidak rusak dan menggunakan kode css ini memecahkan masalah

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

Ini cara saya melakukannya ..

$('#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' }
    ]
});
Kevin Khew
sumber
0

Saya menemui masalah yang sama hari ini.

Saya menggunakan cara yang rumit untuk menyelesaikannya.

Kode Saya seperti di bawah ini.

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

Periksa solusi ini juga. ini memecahkan masalah lebar kolom DataTable saya dengan mudah

JQuery DataTables 1.10.20 memperkenalkan columns.adjust()metode yang memperbaiki masalah tab beralih Bootstrap

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

Silakan lihat dokumentasi: tab Scrolling dan Bootstrap

PNP
sumber
-1

Ini bekerja dengan baik.

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