我使用jQuery DataTables插件和scrollX:true进行水平滚动。
为什么滚动条出现在tfoot标签上方？
如何让它显示在页脚下方？
<script type="text/javascript">
$(function() {
var table = $('#example1').DataTable({
scrollY: "400px",
scrollX: "400px",
bPaginate: true,
bLengthChange: true,
bFilter: true,
bSort: true,
bInfo: true,
paging: true,
Footer: true,
fixedColumns: {
leftColumns: 3,
rightColumns: 0
}
});
});
</script>
答案 0 :(得分：0)
基本上你可以通过改变css规则来实现这一点。
$(document).ready(function(){
$('#example').DataTable({
scrollY: "100%",
scrollX: true,
bPaginate: true,
bLengthChange: true,
bFilter: true,
bSort: true,
bInfo: true,
paging: true,
footer: true,
fixedColumns: {
leftColumns: 3
},
fnInitComplete: function(){
$('.dataTables_scrollBody').css({'overflow': 'hidden','border':'0'});
$('.dataTables_scrollFoot').css('overflow', 'auto');
$('.dataTables_scrollFoot').on('scroll', function () {
$('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
});
},
drawCallback: function( settings ) {
setTimeout(function(){$('.DTFC_LeftBodyWrapper, .DTFC_LeftBodyLiner').height($('.dataTables_scrollBody').height());},0);
}
});
});
$(window).resize(function(){$('#example').DataTable().draw()});.DTFC_LeftBodyLiner {
max-height: unset!important;
}
.DTFC_LeftFootWrapper {
top: 0!important;
}<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/fc-3.2.4/datatables.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/fc-3.2.4/datatables.min.js"></script>
<table id="example" class="display nowrap" style="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>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters@datatables.net</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>a.cox@datatables.net</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>c.kelly@datatables.net</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>a.satou@datatables.net</td>
</tr>
<tr>
<td>Brielle</td>
<td>Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
<td>4804</td>
<td>b.williamson@datatables.net</td>
</tr>
<tr>
<td>Herrod</td>
<td>Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
<td>9608</td>
<td>h.chandler@datatables.net</td>
</tr>
<tr>
<td>Rhona</td>
<td>Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
<td>6200</td>
<td>r.davidson@datatables.net</td>
</tr>
<tr>
<td>Colleen</td>
<td>Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
<td>2360</td>
<td>c.hurst@datatables.net</td>
</tr>
<tr>
<td>Sonya</td>
<td>Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
<td>1667</td>
<td>s.frost@datatables.net</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Position</td>
<td>Office</td>
<td>Age</td>
<td>Start date</td>
<td>Salary</td>
<td>Extn.</td>
<td>E-mail</td>
</tr>
</tfoot>
</table>