数据表：如何修复第一行和第一列？

时间：2015-11-17 14:31:54

标签： jquery css datatables

我有一张大桌子。 （＆gt; 50 cols，＆gt; 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',
    }
});

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

我做错了什么？

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

这可以帮助你帮助我吗？

2 个答案:

答案 0 :(得分：5)

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#example').DataTable({
    scrollY: 300,
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    fixedColumns: true
  });
});
＆＃13; 
/* Ensure that the demo table scrolls */

th,
td {
  white-space: nowrap;
}
div.dataTables_wrapper {
  width: 400px;
  margin: 0 auto;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

DEMO
我认为您尚未加入Fixed Table plugin Datatable CSS和Fixed Datable JS Source

答案 1 :(得分：1)

我认为问题可能是，你错过了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

相关问题
最新问题