dataTables - nie można uzyskać poziomego przewijania i stałej kolumny, aby wykonać swoją pracę. Wydaje się, że wszędzie renderuje się inaczej. Co ja robię źle?

Spędziłem GODZINY próbując to rozgryźć. Muszę stworzyć tabelę, która jest praktycznie identyczna z tabelą wyświetlaną pod tym linkiem:

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

Gdzie przewija się w pionie i poziomie, zachowując kolumnę przymocowaną do boku. Ostatecznie chciałbym, aby prawa kolumna została naprawiona, a nie lewa, ale w tej chwili nie jest to mój problem.

Mój problem polega na tym, że pomimo funkcjonalnych .js, sortuje kolumny i robi prawie wszystko, co powinno, a nawet używając identycznego CSS, środkowy kontener - ten, który ma przewijać się poziomo - nie. Pionowy zwój działa dobrze. Wyraźnie działa w tym przykładzie, a .js ma obsługiwać wszystko po zbudowaniu tabeli. W tej chwili po prostu chcę, aby działało, zanim nawet spróbuję przełączyć się z lewej na prawą kolumnę. Jeśli możesz mi pomóc w tym samym czasie, tym lepiej, ale jak już powiedziałem, nie to, co jest obecnie istotne.

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>

Oto jsfiddle, aby pokazać problem. Co dziwne, hoz-scroll rzeczywiście pojawia się w tym miejscu (w moim lokalnym przykładzie jest całkowicie nieobecny), ale nadal nie pozwala na pozostawienie lewej kolumny (silnika renderującego) i rozszerza całą tabelę, co jak możesz patrz przykładowy link, nie powinien tego robić.

Powinienem również wspomnieć, że jest to robione w środowisku Bootstrap iz tego, co przeczytałem do tej pory, dataTables i Bootstrap powinny działać dość dobrze. Myślałem, że może być jakiś styl, który wyłącza przewijanie w poziomie, ale nie znalazłem jeszcze żadnych rozbieżności.

Ponadto, przy dalszej kontroli, powinna istnieć klasa = "DTFC_LeftWrapper" w tej lewej kolumnie, która nie pojawia się w przykładzie jsfiddle, prawdopodobnie dlatego hoz-bar rozciąga się na całą lewą stronę. Nie wiem, dlaczego nie pojawiłby się tam, ale działa w plikach lokalnych, jak również w przykładowym łączu.

Z tego, co udało mi się ustalić, tabela w klasie = "dataTables_scrollBody" nie wykracza poza div, która jest zawarta w class = "dataTables_scroll", która również wydaje się być nieobecna w wersji jsfiddle. W wersji lokalnej wszelkie próby wymuszenia jej na zewnątrz tylko poszerzają szerokość div.

Nie wiem, staram się tylko dać ci tyle, ile mogę, żeby iść dalej.

Każda pomoc zostanie doceniona.

questionAnswers(3)

yourAnswerToTheQuestion