jquery - 数据表: how to fix both first row and first column?

Question

我有一张大 table 。 (>50 列，>100 行)。

我正在使用FixedHeader扩展以保持第一行固定广告顶部。这有效。

但是当用户水平滚动时，我无法使第一列保持固定，我正在尝试使用 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',
    }
}); 

问题是，当用户垂直滚动时，第一行保持固定在顶部，好的，但是当用户水平滚动浏览器视口(viewport)时查看所有其他列第一列不会固定在页面的左边距。

我做错了什么？

编辑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 JS Source