jQuery DataTables: szerokość tabeli sterującej

98

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%;  
}  
John Mac
źródło
FYI, właśnie napotkałem problem polegający na tym, że kolumna nie dostosowywała się poprawnie w IE8. Winowajcą był obraz, który miał max-widthustawioną właściwość. Pozorny IE8 nie lubi tej właściwości za bardzo i zignorował ją w odniesieniu do danych, mimo że obraz miał poprawny rozmiar na ekranie. Zmiana w celu widthrozwiązania problemu.
John Bubriski

Odpowiedzi:

61

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.

Arik Kfir
źródło
1
Mam również ten sam problem z @John McC, jednak zastosowałem mój datatable do modalu, używam bootstrap i utknąłem z tym problemem… czy wiesz, jak zaimplementować go używając modalu bootstrap zamiast tabulatorów? . Naprawdę potrzebuję twojej pomocy
cfz
polecam użyć window.resize, spójrz na przykład legacy.datatables.net/ref#fnAdjustColumnSizing
KingRider
"aoColumnDefs": [{"sWidth": "10%", "aTargets": [-1]}]. Naprawiam swój problem, po prostu to dodaj, dziękuję.
Mina chen
55

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ś.

artlung
źródło
mmm. mówisz, że jest to wynikiem bAutoWidth: true dokonywania niezbyt inteligentnych wyborów dotyczących szerokości kolumn.
John Mac
To jest to, co myślę. Moje tabele podskakują, jeśli dane są niespójne pod względem długości. Dlatego wstawiłem parametry aoColumns i bAutoWidth.
artlung
1
piękny. całkowicie naprawił mój problem.
Laguna
Niesamowite @Laguna! Uwielbiam słyszeć, że stare odpowiedzi, takie jak ta, są nadal pomocne.
artlung
1
„bAutoWidth”: fałszywe działa. Ale tylko pytanie. Czy jest dobrą praktyką, czy nie, umieszczanie szczegółów szerokości w moich tagach <th>?
finnTheHumin
52
jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});
Suraj
źródło
2
To była dla mnie właściwa odpowiedź. Używam boostrap .table-responsive. Gdy kod datatable ustawi własną szerokość, przeszkadza.
mac10688
Przyszedłem tutaj, aby opublikować moje rozwiązanie tego głupiego problemu, który obejmował usunięcie właściwości width w zdarzeniu zmiany karty, ale wydaje się, że to naprawiło. Dzięki. +1
Topher
Mam 3 karty i dane na pierwszych dwóch kartach, tabela na drugiej karcie nie ma pełnej szerokości. to rozwiązało mój problem. dzięki
Mike Volmar
47

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?

SingleNegationElimination
źródło
1
Uważam, że jest to również najlepsze rozwiązanie, ponieważ w moim przypadku tabela była również ustawiana na szerokość 100px, gdy któraś z kolumn była niewidoczna - patrz tutaj: datatables.net/forums/discussion/3417/ ...
mydoghasworms
To rozwiązanie, które mi się sprawdziło. daje lepszą kontrolę nad css tabeli danych w porównaniu z oTable.fnAdjustColumnSizing (); rozwiązanie wspomniane wcześniej.
Vijay Rumao,
11

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;

}

user1842675
źródło
2
To pomaga, ale teraz wszystkie moje kolumny mają dziwne rozmiary. Spodziewałbym się, że kolumny z największą ilością danych będą miały największą procentową szerokość.
cjbarth
7

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

    });
Peter Drinnan
źródło
6

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

#<your_table_id> {
    width: inherit !important;
}
Bahadir Tasdemir
źródło
1
Miałem osobny problem, z którym walczyłem przez ostatnie 30 minut - ten wiersz kodu go naprawił - więc chciałem tylko podziękować za ten przypadkowy komentarz.
user1274820
1
Właśnie dlatego udzielam dodatkowych odpowiedzi
Bahadir Tasdemir
5

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.

tubelight
źródło
5

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!

leczyć 85
źródło
1
To było to dla mnie, ustawiałem wszystkie kolumny na 1px. Pozostawienie jednego sprawiło, że zadziałało magicznie. Dzięki!
demoncodemonkey
4
"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

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

Nilani Algiriyage
źródło
Nie mogłem sprawić, by tabela prawidłowo wypełniła swój kontener nadrzędny. Próbowałem dopasować css stołu i jego obwoluty do szerokości: 100%; bez zauważalnej różnicy. Kiedy wypróbowałem wyżej wymienioną metodę, zdziałało cuda, jednak nie wskazuję na opakowanie, zamiast tego musiałem wskazać stół, który jest sobą. Ale wielkie dzięki Nilani !!
Logic 1
3

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

});
Helmut Steiner
źródło
2

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.

Dave
źródło
2

Czy robisz to w przypadku gotowości?

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

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

Mufaka
źródło
spójrz na powyższy kod - dzieje się to w wywołaniu zwrotnym z ładowania AJAX kontenera div # tab-datasets. Tabela #querytableDatasets jest udostępniana przez / cgi-bin / qryDatasets
John Mac
Rozumiem to, nie jestem pewien czasu, w którym to się stanie. Patrząc na źródło wtyczki, wydawało się, że jedyny przypadek, w którym można ustawić szerokość 0px, to moment, w którym nie mógł określić prawidłowej tabeli offSetWidth i doszedłem do wniosku, że było to związane ze zbyt wczesnym uruchomieniem.
Mufaka
hmm. Założyłem, że wywołanie zwrotne z obciążenia AJAX jest wywoływane po załadowaniu tabeli #querytableDatasets. myślisz, że tak nie jest?
John Mac,
BTW, aby odpowiedzieć na twoje pytanie, kiedy to działa, jest to odpowiedź na kliknięcie przycisku przez użytkownika
John Mac
Hmm, nie jestem pewien, czy mogę wtedy dodać coś więcej. Jeśli jest to kliknięcie przycisku, dokument jest w pełni załadowany i nie ma powodu, aby umieszczać to w zdarzeniu ready. Możesz pobawić się szerokością kontenera tabeli lub spróbować sprawić, by ich (wtyczka DataTables) działała poza bieżącym układem.
Mufaka,
1

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,
      });
});
DrewT
źródło
1

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);
}        
Chandra Sekhar beluduru
źródło
1

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;}
abcdefghiraj
źródło
1

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

Chuanzhou Tang
źródło
0

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%;
}
mardala
źródło
0

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:

Nick Holden
źródło
0

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

DejanR
źródło
0

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
}
h0mayun
źródło
0

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' }
    ]
});
Kevin Khew
źródło
0

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();
    }
});
Kenneth Wong
źródło
0

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

PNP
źródło
-1

To działa dobrze.

#report_container {
   float: right;
   position: relative;
   width: 100%;
}
Sam
źródło