jQuery DataTables: mengontrol lebar tabel

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%;  
}  

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.

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.

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

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?

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;

}

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%");
        }

    });

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

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

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

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!

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

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

Seperti pada Datatable 10.1, ini lurus ke depan. Cukup letakkan atribut lebar ke tabel Anda dalam HTML. yaitu width = "100%", ini akan menimpa semua gaya CSS yang disetel oleh DT.

Lihat http://www.datatables.net/examples/basic_init/flexible_width.html ini

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

});

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.

Apakah Anda melakukan ini dalam acara yang sudah siap?

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

Ukurannya kemungkinan besar akan tergantung pada dokumen yang dimuat sepenuhnya.

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,
      });
});

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);
}        

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;}

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

Saya mengalami masalah serupa saat div melilit meja.

Menambahkan posisi: relatif memperbaikinya untuk saya.

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

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:

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

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
}

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

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

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

Ini bekerja dengan baik.

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