jQuery DataTables: szerokość tabeli sterującej

Mam problem ze sterowaniem szerokością tabeli za pomocą wtyczki jQuery DataTables. Tabela powinna zajmować 100% szerokości kontenera, ale ostatecznie ma dowolną szerokość, a nie mniej niż szerokość kontenera.

Mile widziane sugestie

Deklaracja tabeli wygląda następująco

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

A javascript

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

Sprawdzając kod HTML w Firebug, widzisz to (zwróć uwagę na dodany styl = "width: 0px;")

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

Patrząc na style w Firebug, nadpisano styl table.display. Nie mogę zobaczyć, skąd się to bierze

element.style {  
  width:0;}    

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

Problem jest spowodowany tym, że dataTable musi obliczyć swoją szerokość, ale gdy jest używana wewnątrz karty, nie jest widoczna, dlatego nie może obliczyć szerokości. Rozwiązaniem jest wywołanie „fnAdjustColumnSizing”, gdy pojawi się karta.

Preambuła

Ten przykład pokazuje, jak DataTables z przewijaniem mogą być używane razem z zakładkami jQuery UI (lub w rzeczywistości dowolną inną metodą, w której tabela znajduje się w ukrytym (display: none) elemencie, gdy jest inicjowana). Powodem, dla którego wymaga to szczególnego rozważenia, jest to, że gdy DataTables jest inicjowany i znajduje się w ukrytym elemencie, przeglądarka nie ma żadnych pomiarów, z którymi można by podać DataTables, a to będzie wymagało niewspółosiowości kolumn, gdy przewijanie jest włączone.

Aby obejść ten problem, należy wywołać funkcję API fnAdjustColumnSizing. Ta funkcja obliczy potrzebne szerokości kolumn na podstawie bieżących danych, a następnie przerysuje tabelę - co jest dokładnie tym, co jest potrzebne, gdy tabela stanie się widoczna po raz pierwszy. W tym celu używamy metody 'show' dostarczanej przez tabele interfejsu użytkownika jQuery. Sprawdzamy, czy DataTable została utworzona, czy nie (zwróć uwagę na dodatkowy selektor dla „div.dataTables_scrollBody”, który jest dodawany podczas inicjalizacji DataTable). Jeśli tabela została zainicjowana, zmieniamy jej rozmiar. Optymalizację można dodać do zmiany rozmiaru tylko pierwszego wyświetlenia tabeli.

Kod inicjalizacyjny

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

Zobacz to, aby uzyskać więcej informacji.

Będziesz chciał dostosować dwie zmienne podczas inicjalizacji dataTables: bAutoWidthiaoColumns.sWidth

Zakładając, że masz 4 kolumny o szerokościach 50 pikseli, 100, 120 pikseli i 30 pikseli, wykonaj następujące czynności:

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

Więcej informacji na temat inicjalizacji dataTables można znaleźć pod adresem http://datatables.net/usage

Uważaj na interakcję między tym ustawieniem szerokości i stosowanym kodem CSS. Możesz skomentować istniejący CSS, zanim spróbujesz, aby zobaczyć, jak blisko jesteś.

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

Cóż, nie jestem zaznajomiony z tą wtyczką, ale czy możesz zresetować styl po dodaniu datatable? Coś jak

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

po wywołaniu .dataTable?

Miałem wiele problemów z szerokością kolumn danych. Magiczną poprawką było dla mnie włączenie linii

table-layout: fixed;

ten css idzie w parze z ogólnym css tabeli. Na przykład, jeśli zadeklarowałeś dane w następujący sposób:

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

wtedy magiczna linia css trafiłaby do klasy Loadtable

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

}

Rozwiązanie TokenMacGuys działa najlepiej, ponieważ jest to wynikiem błędu w jQdataTable. Co się stanie, jeśli użyjesz $ ('# somethingabe'). DataTable (). FnDestroy (), szerokość tabeli zostanie ustawiona na 100px zamiast 100%. Oto szybkie rozwiązanie:

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

    });

Dodaj tę klasę css do swojej strony, rozwiąże to problem:

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

Ustawienie szerokości jawnie przy użyciu sWidthdla każdej kolumny ORAZ bAutoWidth: falsepodczas dataTableinicjalizacji rozwiązało mój (podobny) problem. Uwielbiam przepełniony stos.

Musisz zostawić przynajmniej jedno pole bez stałego pola, na przykład:

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

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

Możesz zmienić wszystko, ale tylko jeden pozostawić jako zerowy, aby mógł się rozciągnąć. Jeśli ustawisz szerokości na WSZYSTKIE, to nie zadziała. Mam nadzieję, że dzisiaj komuś pomogłem!

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

To działało dobrze, aby dopasować całą szerokość stołu. Dzięki @Peter Drinnan!

Podobnie jak w przypadku Datatable 10.1 jest to proste. Po prostu umieść atrybut szerokości w swojej tabeli w HTML. tzn. width = "100%", nadpisze wszystkie style CSS ustawione przez DT.

Zobacz ten http://www.datatables.net/examples/basic_init/f flexible_width.html

Żadne z rozwiązań tutaj nie zadziałało. Nawet przykład na stronie głównej datatables nie zadziałał w związku z inicjalizacją datatable w opcji show.

Znalazłem rozwiązanie problemu. Sztuczka polega na użyciu opcji aktywuj dla zakładek i wywołaniu fnAdjustColumnSizing () na widocznej tabeli :

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

});

Powiem tylko, że miałem dokładnie ten sam problem co ty, chociaż właśnie zastosowałem JQuery do normalnego stołu bez żadnego Ajaxa. Z jakiegoś powodu Firefox nie rozszerza tabeli po jej ujawnieniu. Rozwiązałem problem, umieszczając tabelę wewnątrz DIV i zamiast tego zastosowałem efekty do DIV.

Czy robisz to w przypadku gotowości?

$ (dokument) .ready (funkcja () {...});

Rozmiar najprawdopodobniej będzie zależał od pełnego załadowania dokumentu.

Dla każdego, kto ma problem z dostosowaniem szerokości tabeli / komórki za pomocą wtyczki ze stałym nagłówkiem:

Datatables opiera się na tagach thead dla parametrów szerokości kolumn. Dzieje się tak, ponieważ jest to tak naprawdę jedyny natywny kod HTML, ponieważ większość wewnętrznego kodu HTML tabeli jest generowana automatycznie.

Jednak dzieje się tak, że część twojej komórki może być większa niż szerokość przechowywana w komórkach thead.

To znaczy, jeśli twoja tabela ma dużo kolumn (szeroka tabela), a twoje wiersze mają dużo danych, to wywołanie "sWidth": zmiana rozmiaru komórki td nie będzie działać poprawnie, ponieważ wiersze potomne automatycznie zmieniają rozmiar td na podstawie przepełnienia treść i dzieje się to później zainicjowaniu tabeli i przekazaniu jej parametrów inicjalizacji.

Oryginalne parametry „sWidth”: są nadpisywane (zmniejszane), ponieważ pliki danych uważają, że tabela nadal ma domyślną szerokość% 100 - nie rozpoznaje, że niektóre komórki są przepełnione.

Aby to naprawić, obliczyłem szerokość przepełnienia i uwzględniłem to, odpowiednio zmieniając rozmiar tabeli po zainicjowaniu tabeli - skoro już to robimy, możemy w tym samym czasie zainicjować nasz stały nagłówek:

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

utwórz swój fixedheader wewnątrz "sukcesu" twojego wywołania Ajax, nie będziesz mieć żadnych problemów z wyrównaniem w nagłówku i wierszach.

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

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

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

Mam nadzieję, że to pomoże komuś, kto wciąż walczy.

Nie trzymaj stołu w żadnym pojemniku. Ustaw opakowanie tabeli jako kontener po wyrenderowaniu tabeli. Wiem, że może to być nieprawidłowe w miejscach, w których oprócz tabeli masz coś innego, ale zawsze możesz dodać tę zawartość z powrotem.

Dla mnie ten problem pojawia się, jeśli masz pasek boczny i kontener, który jest w rzeczywistości przesunięciem w stosunku do tego paska bocznego.

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

(Dodałem panel domyślny)
I twoja klasa:

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

znaleźć inne przydatne łącze dotyczące tego problemu i to rozwiązało mój problem.

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

Tabela szerokości siły w danych

Napotkałem podobny problem, gdy wokół stołu zawinięto element div.

Dodawanie pozycji: względny naprawił to za mnie.

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

Miałem podobny problem, w którym zawartość tabeli była większa niż nagłówek i stopka tabeli. Wydaje się, że dodanie elementu div dookoła stołu i ustawienie przepełnienia x rozwiązało ten problem:

Upewnij się, że wszystkie inne parametry przed bAutoWidth i aoColumns są poprawnie wprowadzone. Każdy nieprawidłowy parametr przed złamaniem tej funkcji.

Miałem podobny problem i stwierdziłem, że tekst w kolumnach nie pęka, a użycie tego kodu CSS rozwiązało problem

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

To jest mój sposób na zrobienie tego ...

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

Mam dziś ten sam problem.

Użyłem trudnego sposobu, aby go rozwiązać.

Mój kod, jak poniżej.

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

Sprawdź też to rozwiązanie. rozwiązało to łatwo mój problem z szerokością kolumny DataTable

JQuery DataTables 1.10.20 wprowadza columns.adjust()metodę, która naprawia problem z przełącznikiem Bootstrap

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

Zapoznaj się z dokumentacją: zakładki Przewijanie i Bootstrap

To działa dobrze.

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