Datatable: как исправить как первую строку, так и первую колонку?

У меня большой стол. (> 50 колос,> 100 строк).Datatable: как исправить как первую строку, так и первую колонку?

Я использую расширение FixedHeader, чтобы сохранить фиксированный верхний ряд первой строки. Это работает.

Но я не могу включить первый COLUMN, чтобы оставаться фиксированным, когда пользователь прокручивается по горизонтали, и я пытаюсь сделать это, используя FixedColumns.

Мой фактический Код инициализации

$('#order_proposal_table').DataTable({ 
    'pageLength' : 500, 
    'fixedHeader' : true, 
    'fixedColumns' : { 
     leftColumns: 1, 
    }, 
    'sDom'   : 'lprtip ', // default was lfrtip, i repeat pagination both on top and on bottom 
    'lengthMenu' : [[10,25,50,100,250,500,-1], [10,25,50,100,250,500,'Tutte']], 
    'language'  : { 
     'url': '//cdn.datatables.net/plug-ins/1.10.10/i18n/Italian.json', 
    } 
});

проблема в том, что первые строки остается фиксированной на вершине, когда пользователь прокрутки по вертикали, хорошо, но когда пользователь прокрутки окна просмотра браузера по горизонтали, чтобы увидеть все остальные столбцы первые столбцы не остаются фиксированными в левом поле страницы.

Что я делаю неправильно?

EDIT 1:

Я попытался с fixedColumns: true,, но ничего не изменилось.

EDIT 2:

я, только сейчас, можно увидеть эту информацию в консоли JavaScript:

DataTables warning: table id=order_proposal_table - FixedColumns is not 
needed (no x-scrolling in DataTables enabled), so no action will be 
taken. Use 'FixedHeader' for column fixing when scrolling is not enabled

Может ли это помочь вам, чтобы помочь мне?

источник

2015-11-17 realtebo

ли изменение fixedColumns к ' 'fixedColumns': true' делают никакой разницы? – Ivar

@lvar: (Я обновил вопрос) НЕТ, ваше предложение не дает результатов – realtebo

$(document).ready(function() { 
 
    $('#example').DataTable({ 
 
    scrollY: 300, 
 
    scrollX: true, 
 
    scrollCollapse: true, 
 
    paging: false, 
 
    fixedColumns: true 
 
    }); 
 
});

/* Ensure that the demo table scrolls */ 
 

 
th, 
 
td { 
 
    white-space: nowrap; 
 
} 
 
div.dataTables_wrapper { 
 
    width: 400px; 
 
    margin: 0 auto; 
 
}

<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" /> 
 
<link href="https://cdn.datatables.net/fixedcolumns/3.2.0/css/fixedColumns.dataTables.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> 
 

 
<script src="https://cdn.datatables.net/fixedcolumns/3.2.0/js/dataTables.fixedColumns.min.js"></script> 
 

 
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%"> 
 
    <thead> 
 
    <tr> 
 
     <th>First name</th> 
 
     <th>Last name</th> 
 
     <th>Position</th> 
 
     <th>Office</th> 
 
     <th>Age</th> 
 
     <th>Start date</th> 
 
     <th>Salary</th> 
 
     <th>Extn.</th> 
 
     <th>E-mail</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Olivia</td> 
 
     <td>Liang</td> 
 
     <td>Support Engineer</td> 
 
     <td>Singapore</td> 
 
     <td>64</td> 
 
     <td>2011/02/03</td> 
 
     <td>$234,500</td> 
 
     <td>2120</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Bruno</td> 
 
     <td>Nash</td> 
 
     <td>Software Engineer</td> 
 
     <td>London</td> 
 
     <td>38</td> 
 
     <td>2011/05/03</td> 
 
     <td>$163,500</td> 
 
     <td>6222</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Sakura</td> 
 
     <td>Yamamoto</td> 
 
     <td>Support Engineer</td> 
 
     <td>Tokyo</td> 
 
     <td>37</td> 
 
     <td>2009/08/19</td> 
 
     <td>$139,575</td> 
 
     <td>9383</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Thor</td> 
 
     <td>Walton</td> 
 
     <td>Developer</td> 
 
     <td>New York</td> 
 
     <td>61</td> 
 
     <td>2013/08/11</td> 
 
     <td>$98,540</td> 
 
     <td>8327</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Finn</td> 
 
     <td>Camacho</td> 
 
     <td>Support Engineer</td> 
 
     <td>San Francisco</td> 
 
     <td>47</td> 
 
     <td>2009/07/07</td> 
 
     <td>$87,500</td> 
 
     <td>2927</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Serge</td> 
 
     <td>Baldwin</td> 
 
     <td>Data Coordinator</td> 
 
     <td>Singapore</td> 
 
     <td>64</td> 
 
     <td>2012/04/09</td> 
 
     <td>$138,575</td> 
 
     <td>8352</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Zenaida</td> 
 
     <td>Frank</td> 
 
     <td>Software Engineer</td> 
 
     <td>New York</td> 
 
     <td>63</td> 
 
     <td>2010/01/04</td> 
 
     <td>$125,250</td> 
 
     <td>7439</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Zorita</td> 
 
     <td>Serrano</td> 
 
     <td>Software Engineer</td> 
 
     <td>San Francisco</td> 
 
     <td>56</td> 
 
     <td>2012/06/01</td> 
 
     <td>$115,000</td> 
 
     <td>4389</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jennifer</td> 
 
     <td>Acosta</td> 
 
     <td>Junior Javascript Developer</td> 
 
     <td>Edinburgh</td> 
 
     <td>43</td> 
 
     <td>2013/02/01</td> 
 
     <td>$75,650</td> 
 
     <td>3431</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cara</td> 
 
     <td>Stevens</td> 
 
     <td>Sales Assistant</td> 
 
     <td>New York</td> 
 
     <td>46</td> 
 
     <td>2011/12/06</td> 
 
     <td>$145,600</td> 
 
     <td>3990</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Hermione</td> 
 
     <td>Butler</td> 
 
     <td>Regional Director</td> 
 
     <td>London</td> 
 
     <td>47</td> 
 
     <td>2011/03/21</td> 
 
     <td>$356,250</td> 
 
     <td>1016</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lael</td> 
 
     <td>Greer</td> 
 
     <td>Systems Administrator</td> 
 
     <td>London</td> 
 
     <td>21</td> 
 
     <td>2009/02/27</td> 
 
     <td>$103,500</td> 
 
     <td>6733</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jonas</td> 
 
     <td>Alexander</td> 
 
     <td>Developer</td> 
 
     <td>San Francisco</td> 
 
     <td>30</td> 
 
     <td>2010/07/14</td> 
 
     <td>$86,500</td> 
 
     <td>8196</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Shad</td> 
 
     <td>Decker</td> 
 
     <td>Regional Director</td> 
 
     <td>Edinburgh</td> 
 
     <td>51</td> 
 
     <td>2008/11/13</td> 
 
     <td>$183,000</td> 
 
     <td>6373</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Michael</td> 
 
     <td>Bruce</td> 
 
     <td>Javascript Developer</td> 
 
     <td>Singapore</td> 
 
     <td>29</td> 
 
     <td>2011/06/27</td> 
 
     <td>$183,000</td> 
 
     <td>5384</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Donna</td> 
 
     <td>Snider</td> 
 
     <td>Customer Support</td> 
 
     <td>New York</td> 
 
     <td>27</td> 
 
     <td>2011/01/25</td> 
 
     <td>$112,000</td> 
 
     <td>4226</td> 
 
     <td>[email protected]</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

DEMO
Я думаю, что вы не включают Fixed Table plugin Datatable CSS и Fixed Datable JS Source

источник

2015-11-17 14:49:42 CY5

Ваш пример работает, но это плохой результат: при прокрутке horizzontal первая строка ДОЛЖНА также прокручиваться. – realtebo

@realtebo Извините, я не получил, я вижу все строки в таблице прокрутки по горизонтали – CY5

извините, теперь это работает ... раньше, когда я прокручивал горизонтально, строка заголовка оставалась фиксированной, поэтому заголовок столбца не соответствовал данным столбца. .. странный глюк, больше не происходит ... – realtebo

Я думаю, что проблема может быть, что вам не хватает scrollX: true собственности.

$('#order_proposal_table').DataTable({ 
    'pageLength' : 500, 
    'fixedHeader' : true, 
    'scrollX'  : true, 
    'fixedColumns' : { 
     leftColumns: 1, 
    }, 
    'sDom'   : 'lprtip ', // default was lfrtip, i repeat pagination both on top and on bottom 
    'lengthMenu' : [[10,25,50,100,250,500,-1], [10,25,50,100,250,500,'Tutte']], 
    'language'  : { 
     'url': '//cdn.datatables.net/plug-ins/1.10.10/i18n/Italian.json', 
    } 
});

Смотрите следующие примеры:

https://datatables.net/extensions/fixedcolumns/examples/initialisation/simple.html

https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

источник

2015-11-17 14:51:45 Ivar

Datatable: как исправить как первую строку, так и первую колонку?

ответ

Смежные вопросы