Datatable：如何解決第一行和第一列？

Question

我有一張大桌子。 （> 50列，> 100列）。

我使用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', 
    } 
}); 

的問題是第一行保持固定在頂部時，垂直用戶滾動，OK，但當用戶滾動瀏覽器窗口水平看所有其他列第一列不保留固定在頁面左邊距。

我在做什麼錯？

編輯1：

我試圖與fixedColumns: true,，但什麼都沒有改變。

編輯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 

這篇幫助你幫助我嗎？

Answer 1

$(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>o.liang@datatables.net</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>b.nash@datatables.net</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>s.yamamoto@datatables.net</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>t.walton@datatables.net</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>f.camacho@datatables.net</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>s.baldwin@datatables.net</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>z.frank@datatables.net</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>z.serrano@datatables.net</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>j.acosta@datatables.net</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>c.stevens@datatables.net</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>h.butler@datatables.net</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>l.greer@datatables.net</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>j.alexander@datatables.net</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>s.decker@datatables.net</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>m.bruce@datatables.net</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>d.snider@datatables.net</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

DEMO
我想你還沒有包括Fixed Table plugin Datatable CSS和Fixed Datable JSSource

Answer 2

我想問題可能是，你缺少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