数据表在tfoot标签下方显示滚动条？

Question

我使用 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>

Answer 1

基本上，您可以通过更改 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>