dataTables - Kann nicht horizontal scrollen & Feste Spalte um Ihre Arbeit zu tun. Scheint gerendert überall. Was mache ich falsch?

Ich habe STUNDEN damit verbracht, zu versuchen, um dies herauszufinden. Ich brauche, um eine Tabelle, die ist quasi identisch mit der, die angezeigt wird unter diesem link:

https://datatables.net/extensions/fixedcolumns/

Wo es scrollt vertikal und horizontal, während eine Spalte fester an der Seite. Letztlich hätte ich gerne die Rechte Spalte fest anstelle von der linken Seite, aber das ist nicht wirklich mein problem im moment.

Mein problem ist, dass trotz der funktionellen .js, das sortiert die Spalten und so ziemlich alles tut was es soll, und sogar mit identischen CSS, der mittlere container - die eine, die angeblich horizontal scrollen - nicht. Die vertikale scrollen funktioniert einwandfrei. Es ist eindeutig die Arbeit in dem Beispiel und den .js ist ziemlich viel, eigentlich alles im Griff, sobald die Tabelle erstellt wird. Rechts jetzt, ich will einfach nur, um es zu arbeiten, bevor Sie sogar versuchen, zu wechseln von der linken in die Rechte Spalte. Wenn können Sie mir helfen mit, dass in der gleichen Zeit, umso besser, aber wie gesagt, nicht das, was ist derzeit wichtig.

http://jsfiddle.net/biggest/WCpYx/6/

//jquery
$(document).ready( function () {
var oTable = $('#example').dataTable( {
    "sScrollY": "300px",
    "sScrollX": "100%",
    "sScrollXInner": "150%",
    "bScrollCollapse": true,
    "bPaginate": false
} );
new FixedColumns( oTable );
} );

//HTML
<div id="container" style="width: 700px;">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
</tfoot>
<tbody>
    <tr class="gradeX">
        <td>Trident</td>
        <td>Internet Explorer 4.0</td>
        <td>Win 95+</td>
        <td class="center">4</td>
        <td class="center">X</td>

    </tr>
    <tr class="gradeC">
        <td>Trident</td>
        <td>Internet Explorer 5.0</td>
        <td>Win 95+</td>
        <td class="center">5</td>
        <td class="center">C</td>

    </tr>
    <tr class="gradeA">
        <td>Trident</td>
        <td>Internet Explorer 5.5</td>
        <td>Win 95+</td>
        <td class="center">5.5</td>
        <td class="center">A</td>

    </tr>
    <tr class="gradeA">
        <td>Trident</td>
        <td>Internet Explorer 6</td>
        <td>Win 98+</td>
        <td class="center">6</td>
        <td class="center">A</td>

    </tr>
    <tr class="gradeA">
        <td>Trident</td>
        <td>Internet Explorer 7</td>
        <td>Win XP SP2+</td>
        <td class="center">7</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Trident</td>
        <td>AOL browser (AOL desktop)</td>
        <td>Win XP</td>
        <td class="center">6</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 1.0</td>
        <td>Win 98+ /OSX.2+</td>
        <td class="center">1.7</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox <br>1.5</td>
        <td>Win 98+ /OSX.2+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 2.0</td>
        <td>Win 98+ /OSX.2+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 3.0</td>
        <td>Win 2k+ /OSX.3+</td>
        <td class="center">1.9</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Camino 1.0</td>
        <td>OSX.2+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Camino 1.5</td>
        <td>OSX.3+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Netscape 7.2</td>
        <td>Win 95+ /Mac OS 8.6-9.2</td>
        <td class="center">1.7</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Netscape Browser 8</td>
        <td>Win 98SE+</td>
        <td class="center">1.7</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Netscape Navigator 9</td>
        <td>Win 98+ /OSX.2+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Mozilla 1.0</td>
        <td>Win 95+ /OSX.1+</td>
        <td class="center">1</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Mozilla 1.1</td>
        <td>Win 95+ /OSX.1+</td>
        <td class="center">1.1</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Mozilla 1.2</td>
        <td>Win 95+ /OSX.1+</td>
        <td class="center">1.2</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Mozilla 1.3</td>
        <td>Win 95+ /OSX.1+</td>
        <td class="center">1.3</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Mozilla 1.4</td>
        <td>Win 95+ /OSX.1+</td>
        <td class="center">1.4</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Mozilla 1.5</td>
        <td>Win 95+ /OSX.1+</td>
        <td class="center">1.5</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Mozilla 1.6</td>
        <td>Win 95+ /OSX.1+</td>
        <td class="center">1.6</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Mozilla 1.7</td>
        <td>Win 98+ /OSX.1+</td>
        <td class="center">1.7</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Mozilla 1.8</td>
        <td>Win 98+ /OSX.1+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Seamonkey 1.1</td>
        <td>Win 98+ /OSX.2+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Epiphany 2.20</td>
        <td>Gnome</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Webkit</td>
        <td>Safari 1.2</td>
        <td>OSX.3</td>
        <td class="center">125.5</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Webkit</td>
        <td>Safari 1.3</td>
        <td>OSX.3</td>
        <td class="center">312.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Webkit</td>
        <td>Safari 2.0</td>
        <td>OSX.4+</td>
        <td class="center">419.3</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Webkit</td>
        <td>Safari 3.0</td>
        <td>OSX.4+</td>
        <td class="center">522.1</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Webkit</td>
        <td>OmniWeb 5.5</td>
        <td>OSX.4+</td>
        <td class="center">420</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Webkit</td>
        <td>iPod Touch / iPhone</td>
        <td>iPod</td>
        <td class="center">420.1</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Webkit</td>
        <td>S60</td>
        <td>S60</td>
        <td class="center">413</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Presto</td>
        <td>Opera 7.0</td>
        <td>Win 95+ /OSX.1+</td>
        <td class="center">-</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Presto</td>
        <td>Opera 7.5</td>
        <td>Win 95+ /OSX.2+</td>
        <td class="center">-</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Presto</td>
        <td>Opera 8.0</td>
        <td>Win 95+ /OSX.2+</td>
        <td class="center">-</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Presto</td>
        <td>Opera 8.5</td>
        <td>Win 95+ /OSX.2+</td>
        <td class="center">-</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Presto</td>
        <td>Opera 9.0</td>
        <td>Win 95+ /OSX.3+</td>
        <td class="center">-</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Presto</td>
        <td>Opera 9.2</td>
        <td>Win 88+ /OSX.3+</td>
        <td class="center">-</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Presto</td>
        <td>Opera 9.5</td>
        <td>Win 88+ /OSX.3+</td>
        <td class="center">-</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Presto</td>
        <td>Opera for Wii</td>
        <td>Wii</td>
        <td class="center">-</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Presto</td>
        <td>Nokia N800</td>
        <td>N800</td>
        <td class="center">-</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Presto</td>
        <td>Nintendo DS browser</td>
        <td>Nintendo DS</td>
        <td class="center">8.5</td>
        <td class="center">C/A</td>
    </tr>
    <tr class="gradeC">
        <td>KHTML</td>
        <td>Konqureror 3.1</td>
        <td>KDE 3.1</td>
        <td class="center">3.1</td>
        <td class="center">C</td>
    </tr>
    <tr class="gradeA">
        <td>KHTML</td>
        <td>Konqureror 3.3</td>
        <td>KDE 3.3</td>
        <td class="center">3.3</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>KHTML</td>
        <td>Konqureror 3.5</td>
        <td>KDE 3.5</td>
        <td class="center">3.5</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeX">
        <td>Tasman</td>
        <td>Internet Explorer 4.5</td>
        <td>Mac OS 8-9</td>
        <td class="center">-</td>
        <td class="center">X</td>
    </tr>
    <tr class="gradeC">
        <td>Tasman</td>
        <td>Internet Explorer 5.1</td>
        <td>Mac OS 7.6-9</td>
        <td class="center">1</td>
        <td class="center">C</td>
    </tr>
    <tr class="gradeC">
        <td>Tasman</td>
        <td>Internet Explorer 5.2</td>
        <td>Mac OS 8-X</td>
        <td class="center">1</td>
        <td class="center">C</td>
    </tr>
    <tr class="gradeA">
        <td>Misc</td>
        <td>NetFront 3.1</td>
        <td>Embedded devices</td>
        <td class="center">-</td>
        <td class="center">C</td>
    </tr>
    <tr class="gradeA">
        <td>Misc</td>
        <td>NetFront 3.4</td>
        <td>Embedded devices</td>
        <td class="center">-</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeX">
        <td>Misc</td>
        <td>Dillo 0.8</td>
        <td>Embedded devices</td>
        <td class="center">-</td>
        <td class="center">X</td>
    </tr>
    <tr class="gradeX">
        <td>Misc</td>
        <td>Links</td>
        <td>Text only</td>
        <td class="center">-</td>
        <td class="center">X</td>
    </tr>
    <tr class="gradeX">
        <td>Misc</td>
        <td>Lynx</td>
        <td>Text only</td>
        <td class="center">-</td>
        <td class="center">X</td>
    </tr>
    <tr class="gradeC">
        <td>Misc</td>
        <td>IE Mobile</td>
        <td>Windows Mobile 6</td>
        <td class="center">-</td>
        <td class="center">C</td>
    </tr>
    <tr class="gradeC">
        <td>Misc</td>
        <td>PSP browser</td>
        <td>PSP</td>
        <td class="center">-</td>
        <td class="center">C</td>
    </tr>
    <tr class="gradeU">
        <td>Other browsers</td>
        <td>All others</td>
        <td>-</td>
        <td class="center">-</td>
        <td class="center">U</td>
    </tr>
</tbody>
</table>
</div>

Hier ein jsfiddle um zu zeigen das problem. Seltsam genug, die hoz-scroll-tatsächlich zeigt sich in diesem (es ist völlig abwesend, in mein lokales Beispiel), aber es ist noch nicht erlaubt, die Links (Rendering-Engine) Spalten zu bleiben, und verlängert die gesamte Tabelle, die, wie Sie sehen können, in den Beispiel-link, es nicht tun sollte.

Sollte ich auch erwähnen, dass dies getan wird, in einer Bootstrap-Umgebung und von dem, was ich bisher gelesen habe, dataTables und Bootstrap sollten gemeinsam daran arbeiten, ziemlich gut. Ich dachte, es könnte ein Stil das ist irgendwo deaktivieren das horizontale scrollen aber ich hab noch nicht gefunden Unstimmigkeiten.

Auch bei einer weiteren Untersuchung sollte es sein a class="DTFC_LeftWrapper" auf, die Spalte ganz Links, die nicht zeigen, bis in der jsfiddle Beispiel, das ist wahrscheinlich, warum die hoz-bar erstreckt sich den ganzen Weg auf der linken Seite. Ich weiß nicht, warum, es würde nicht dort auftauchen, aber nicht in lokalen Dateien als auch in dem Beispiel-link.

Aus, was ich schon immer in der Lage zu ermitteln, wird die Tabelle innerhalb der class="dataTables_scrollBody" ist das nicht der, der sich über das div-Element ist es eingeschlossen class="dataTables_scroll", das auch angezeigt wird, abwesend zu sein von der jsfiddle-version. Auf der lokalen version alle versuche, es zu zwingen, außerhalb, nur weitet sich die Breite des div.

Weiß ich nicht, ich versuche nur, um Ihnen so viel wie ich kann zu gehen.

Jede Hilfe bei diesem würde sehr geschätzt werden.

Okay, Lösung Zeit. Vielen Dank nochmals an die Herren unten, Sie waren eine große Hilfe. Wir dachten, einige Dinge aus. Wie ich vermutete, Bootstrap, sich aber nicht in der Art, wie ich ursprünglich dachte, war, dass der überlauf war, wird irgendwo überschrieben. Es stellt sich heraus, bootstrap.css hatte eine Klasse " Tabelle{max-width: 100%}' also keine hoz-Blättern erscheinen würde. Wir geändert zu "auto" und voila. Plus, die Lösung mit der "iColumns" war eine große Hilfe, wie gut.
Kleine Änderung: anstatt der Einstellung auto (die arbeitete in Firebug) offenbar nicht registriert, als der für max-width aus CSS. Es zeigt sich, wie nichts. Anstatt also, in diesem Fall, wir verglichen die max-width auf, dass der Prozentsatz wir sind mit jquery, um die sScrollXInner - in diesem Fall 150%. Und das hat geklappt.

InformationsquelleAutor Biggest | 2013-02-20

  1. 4

    Ich glaube, Sie brauchen, um festzulegen, wie viele Spalten fixiert werden in Ihrem Initialisierer... 

    new FixedColumns( oTable, {
      "iLeftColumns": 0,
      "iRightColumns": 1
    } );

    diese info ist aus http://www.datatables.net/extras/fixedcolumns/options

    Gute Sachen, auch. Es macht das, was ich Suche, aber irgendwie fügt es - wie in der linken Spalte ist immer noch statisch mit einem "iRight Spalten": 1. Ich kann nicht scheinen zu finden, wo (wenn) es erzählt, wie um Sie zu deaktivieren.
    Bisher alle versuche, ein "iColumns": 0 (oder eine beliebige Anzahl für diese Angelegenheit) nicht scheinen, etwas zu tun, unabhängig davon, welche jquery-version, die ich benutze.
    haben Sie versucht, indem iLeftColumns ? neue FixedColumns( oTable, { "iLeftColumns": 0, "iRightColumns": 1 } );
    dies ist die datatables Beispiel datatables.net/release-datatables/extras/FixedColumns/...
    Ich habe. iLeftColumns diente nur dazu, brechen die Spalten insgesamt. Ich habe noch nicht ganz herausgefunden, was die Ursache der Diskrepanz. Vielleicht wird es besser übersetzen auf die lokalen Dateien bin ich mir noch nicht sicher noch nicht, aber in jsfiddle, es hat nicht funktioniert.

    InformationsquelleAutor lukeocom

  2. 4

    Dank @Biggest, Ihren Standpunkt über bootstrap-Tisch-breiten führen zu unserer Lösung. Im chrome, zumindest auto nicht funktioniert, aber keine hat, so dass wir nur noch diese für unsere .weniger Blätter:

    table{
  max-width: none
}
    Ich änderte die "auto" - Kommentar direkt darunter. Mir ging den anderen Weg, da wurden wir mit einen Prozentsatz für die inneren container, wir haben gerade abgestimmt, besser ist als keine. Aber ich bin froh, dass ich war schließlich in der Lage zu helfen, Sie finden eine Lösung.

    InformationsquelleAutor hlascelles

  3. 2

    Neueren Versionen von JQuery haben veraltet $.browser. Aktiv entwickelte plugins eingebunden haben, überprüft, um die Wirkung von if($.browser && $.browser.msie)) eher als if($.browser.msie)). Sie können das problem beheben, indem Sie eine der

    1. Gehören $.browser in Ihrem Projekt.

    2. Verwenden Sie eine ältere version von JQuery.

    3. Patch FixedColumns.js mit $.browser prüft, wie jeder andere auch.

    Ihre jsfiddle funktioniert bei Verwendung einer älteren version von JQuery.

    Faszinierend, du hast Recht, es tut. Ich werde versuchen, auf meinem lokalen Kopien von morgen. Aber das wirft einiges an Licht auf die Sache. Danke. Irgendwelche Ideen, wie man über das vertauschen der Spalten auf diese, während ich dabei bin? Bitte denken Sie daran, ich bin noch relativ neu, einige von diesem Zeug. lukeocom zu sein scheint, auf etwas mit diesem iColumns Sachen, aber ich habe noch nicht ganz lokalisiert das gewünschte Ergebnis noch nicht.
    Es gibt ein plugin für das vertauschen der Spalten im datatables.net/extras/thirdparty/ColReorderWithResize. Es wahrscheinlich leidet unter dem gleichen $.browser problem.

    InformationsquelleAutor Alex Williams

Schreibe einen Kommentar