jQuery Datentabellen: control Tischbreite
https://stackoverflow.com/questions/604933
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe ein Problem, die Breite einer Tabelle Steuerung des jQuery Tables Plugin. Die Tabelle sollte 100% der Behälterbreite sein, aber endet eine beliebige Breite sein, etwas weniger als die Behälterbreite.
Vorschläge geschätzt
Die Tabellendeklaration sieht wie folgt aus
<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3" width="100%">
Und das Javascript
jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){
jQuery('#querytableDatasets').dataTable({
"bPaginate": false,
"bInfo": false,
"bFilter": false
});
}); `
Überprüfen der HTML in Firebug, sehen Sie diese (beachten Sie die zusätzliche style = "width: 0px;")
<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3" width="100%" style="width: 0px;">
Suchen Sie in Firebug auf die Stile, hat die table.display Stil außer Kraft gesetzt wurde. Kann nicht sehen, wo diese herkommt
element.style {
width:0;}
-- dataTables.css (line 84
table.display {
margin:0 auto;
width:100%;
}
Lösung
Das Problem verursacht, weil Datatable seine Breite berechnen müssen - aber wenn sie in einem Register verwendet wird, ist es nicht sichtbar ist, kann daher nicht die Breiten berechnen. Die Lösung ist zu rufen, wenn die Registerkarte zeigt ‚fnAdjustColumnSizing‘.
Präambel
Dieses Beispiel zeigt, wie Tables mit Scrollen verwendet werden kann zusammen mit jQuery UI tabs (oder tatsächlich jedem anderen Verfahren, wobei der Tisch in einem versteckten (display: none) Element, wenn es initialisiert). Der Grund Dies erfordert besondere Aufmerksamkeit, ist, dass, wenn Tables ist in einem verborgenen Element initialisiert und es ist, wird der Browser nicht haben alle Messungen, mit denen Datentabellen zu geben, und dies erfordert in der Verlagerung von Spalten beim Scrollen aktiviert ist.
Die Methode, dies zu umgehen ist die fnAdjustColumnSizing API aufrufen Funktion. Diese Funktion wird die Spaltenbreiten berechnen, sind brauchte auf der Grundlage der aktuellen Daten und dann die Tabelle neu zu zeichnen - das ist, genau das, was erforderlich ist, wenn die Tabelle für die ersten sichtbar wird Zeit. Dazu verwenden wir die Methode ‚show‘ zur Verfügung gestellt von jQuery UI-Tabellen. Wir überprüfen, um zu sehen, ob die Datatable oder nicht erstellt wurde (man beachte die zusätzliche Wähler für ‚div.dataTables_scrollBody‘ wird diese hinzugefügt, wenn die Datatable initialisiert). Wenn die Tabelle initialisiert wurde, wir Größe neu es. Eine Optimierung könnte hinzugefügt werden, um die Größe neu nur von der Erstausstrahlung der Tabelle.
Initialisation Code
$(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 ] }
]
} );
} );
Siehe dieses für weitere Informationen.
Andere Tipps
Sie wollen zwei Variablen zwicken, wenn Sie Datentabellen initialisieren: bAutoWidth und aoColumns.sWidth
Angenommen, Sie haben 4 Spalten mit einer Breite von 50px, 100, 120px und 30px würden Sie tun:
jQuery('#querytableDatasets').dataTable({
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bAutoWidth": false,
"aoColumns" : [
{ sWidth: '50px' },
{ sWidth: '100px' },
{ sWidth: '120px' },
{ sWidth: '30px' }
]
});
Weitere Informationen über die Initialisierung von Datentabellen finden Sie unter http://datatables.net/usage
Achten Sie auf Interaktion zwischen dieser Einstellung und der CSS Breiten funktionierte Sie sich bewerben. Sie könnten eine vorhandene CSS äußern, bevor diese zu sehen versuchen, wie nah Sie erhalten.
Nun, ich bin mit diesem Plugin nicht vertraut, aber könnten Sie den Stil nach dem Hinzufügen der Datentabelle zurücksetzen? So etwas wie
$("#querydatatablesets").css("width","100%")
nach dem .dataTable Aufruf?
jQuery('#querytableDatasets').dataTable({
"bAutoWidth": false
});
Ich habe zahlreiche Probleme mit den Spaltenbreiten von Datentabellen hat. Die magische Lösung für mich war, einschließlich der Zeile
table-layout: fixed;
Diese CSS geht mit der gesamten CSS der Tabelle. Zum Beispiel, wenn Sie die Datentabellen wie folgt erklärt haben:
LoadTable = $('#LoadTable').dataTable.....
dann die Magie CSS Linie in der Klasse Loadtable gehen würde
#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;
}
TokenMacGuys Lösung funktioniert am besten becasue dies ist das Ergebnis eines Fehlers in jQdataTable. Was passiert, ist, wenn Sie $ ( ‚# sometabe‘) verwenden. Datatable (). FnDestroy () die Tabellenbreite auf 100 Pixel statt 100% gesetzt wird. Hier ist eine schnelle Lösung:
$('#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%");
}
});
Einstellung Breite explizit für jede Spalte und sWidth in bAutoWidth: false Initialisierung mit dataTable gelöst meinem (ähnlich) Problem. Die Liebe der überquellenden Stapel.
Sie haben mindestens ein Feld ohne festes Feld, zum Beispiel verlassen:
$('.data-table').dataTable ({
"bAutoWidth": false,
"aoColumns" : [
null,
null,
null,
null,
{"sWidth": "20px"},
{ "sWidth": "20px"}]
});
Sie können alle ändern, aber lassen Sie nur eine als Null, so kann es strecken. Wenn Sie Breiten auf ALL setzen wird es nicht funktionieren. Hoffe, dass ich jemand heute geholfen!
Fügen Sie diese CSS-Klasse auf Ihrer Seite, wird es das Problem beheben:
#<your_table_id> {
width: inherit !important;
}
"fnInitComplete": function() {
$("#datatables4_wrapper").css("width","60%");
}
Das hat gut funktioniert die ganze Tischbreite einzustellen. Dank @ Peter Drinnan!
Wie auf Datentabelle 10.1, ist dies einfach. Einfach Breites Attribut auf den Tisch in HTML. d width = „100%“, wird dies alle CSS-Stile von DT überschreiben.
Sehen Sie diese http://www.datatables.net/examples/basic_init/flexible_width. html
Keine der Lösungen hier für mich gearbeitet. Auch das Beispiel auf der Datentabellen Homepage nicht funktioniert daher auf die Initialisierung der Datentabelle in der zeigen Option.
fand ich eine Lösung für das Problem. Der Trick ist, verwenden Sie die Option Aktivieren für Tabs und nennen fnAdjustColumnSizing () auf der sichtbaren Tabelle :
$(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);
});
Nur zu sagen, ich habe genau so, wie Sie das gleiche Problem hatte, obwohl ich gerade JQuery ohne Ajax in eine normale Tabelle gelten. Aus irgendeinem Grund erweitern Firefox nicht den Tisch, nachdem er enthüllt. Ich reparierte das Problem durch die Tabelle in einem DIV setzen, und die Anwendung, die Auswirkungen auf die DIV statt.
Sind Sie tun dies in dem Ereignis ready?
$(document).ready(function() { ... });
Die Schlichte werden höchstwahrscheinlich auf dem Dokument ist voll beladen abhängig sein werden.
Für alle Probleme, Tisch / Zellenbreite Einstellen der festen Header-Plugin:
Datentabellen beruht auf Thead Tags für Spaltenbreite Parameter. Dies liegt daran, es ist wirklich die einzige native HTML als die meisten der inneren html Tisch bekommt automatisch generiert.
Doch was passiert ist, einige Ihrer Zelle größer als die Breite innerhalb der thead Zellen gespeichert werden können.
d. wenn Ihre Tabelle hat viele Spalten (breite Tabelle) und Ihre Zeilen haben eine Menge Daten, dann ruft „sWidth“: um die Größe td Zelle zu ändern nicht richtig funktioniert, weil die untergeordneten Zeilen werden automatisch TDs basierend auf Überlauf Inhalt Ändern der Größe und dies geschieht nach die Tabelle ist initialisiert und bestanden, der die init params.
Die ursprüngliche Thead „sWidth“. Parameter überschrieben bekommen (geschrumpften), weil Datentabellen denkt Tisch noch die Standardbreite% hat 100 - es erkennt nicht, dass einige Zellen überschwemmt werden
Um dies zu beheben, dachte ich, die Überlaufbreite aus und machte es durch die Tabelle Ändern der Größe nach entsprechendem die Tabelle initialisiert wurde - wenn wir schon dabei sind, können wir unsere festen Header an dem init gleichzeitig:
$(document).ready(function() {
$('table').css('width', '120%');
new FixedHeader(dTable, {
"offsetTop": 40,
});
});
Ihre fixedheader innerhalb des „Erfolgs“ des Ajax-Aufrufs erstellen, werden Sie kein Ausrichtungsproblem in Kopf- und Zeilen haben.
success: function (result) {
/* Your code goes here */
var table = $(SampleTablename).DataTable();
new $.fn.dataTable.FixedHeader(table);
}
Hope, das hilft jemand, der noch zu kämpfen.
Sie halten nicht Ihren Tisch in jedem Behälter. Machen Sie den Tisch des Wrapper-Container nach der Tabelle des gerendert. Ich weiß, das an Orten ungültig sein könnte, wo man etwas anderes zusammen mit dem Tisch haben, aber dann anhängen konnte man immer, dass der Inhalt zurück.
Für mich ist dieses Problem tritt auf, wenn Sie eine Sidebar und einen Behälter haben, der eigentlich ein zu dieser Seitenleiste versetzt ist.
$(YourTableName+'_wrapper').addClass('mycontainer');
(Ich habe eine Tafel Panel-default)
Und Ihre Klasse:
.mycontainer{background-color:white;padding:5px;}
eine weitere nützliche Verbindung, um dieses Problem zu finden und es gelöst mein Problem.
<table width="100%">
<tr>
<td width="20%"> Left TD <td>
<td width="80%"> Datatable </td>
</tr>
</table>
Datentabellen Breitentabelle zwingen
Ich lief in ein ähnliches Problem, wenn ein div um den Tisch herum gewickelt ist.
Hinzufügen von Position. Relativen es für mich festgelegt
#report_container {
float: right;
position: relative;
width: 100%;
}Ich hatte ein ähnliches Problem, bei dem der Inhalt der Tabelle größer war als die Tabelle Kopf- und Fußzeile. Hinzufügen eines div um den Tisch und Einstellung x-Überlauf scheint dieses Problem zu sortier haben:
Seien Sie sicher, dass alle anderen Parameter vor bAutoWidth & aoColumns sind richtig entered.Any falsche Parameter, bevor diese Funktionalität brechen.
Ich hatte das ähnliche Problem und fand, dass Text in Spalten nicht brechen und diesen CSS-Code mit löste das Problem
th,td{
max-width:120px !important;
word-wrap: break-word
}
Das ist meine Art, es zu tun ..
$('#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' }
]
});
treffe ich das gleiche Problem heute.
Ich habe eine schwierige Art und Weise, es zu lösen.
wie unten My-Code.
$('#tabs').tabs({
activate: function (event, ui) {
//redraw the table when the tab is clicked
$('#tbl-Name').DataTable().draw();
}
});
Das funktioniert gut.
#report_container {
float: right;
position: relative;
width: 100%;
}
