큰 테이블이 있습니다. (> 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',
}
});
문제는 첫 번째 행의 유적이 확인, 때 사용자가 스크롤 수직으로 상단에 고정 된 것입니다, 하지만 뷰포트 수평 브라우저 스크롤 사용자가 다른 모든 열을 볼 때 첫 번째 컬럼은 페이지의 왼쪽 여백에 고정 된 상태를 유지하지 않습니다 .
내가 무엇을 잘못하고 있지?
편집 1 :
로 시도 fixedColumns: true,했지만 아무것도 변경되지 않았습니다.
편집 2 :
지금 막 자바 스크립트 콘솔에서이 정보를 볼 수 있습니다.
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
도움이 될까요?
$(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 고정 테이블 플러그인 Datatable CSS 및 Fixed Datable JS Source를
포함하지 않은 것 같습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다