如何放置dataTables＆＃39;桌子顶部的水平滚动条？

时间：2016-02-02 07:01:37

标签： javascript jquery datatable twig

我有一个非常大的数据表，我想把水平滚动条放在桌面的顶部和底部，这样用户就可以更容易地滚动（数据表有很多列）。有没有一种简单而恰当的方法来实现这一目标？

5 个答案:

答案 0 :(得分：8)

您可以使用具有最大宽度的容器并将表放入其中。 

<div class="large-table-container-1">
  <table>...</table>
</div>

根据您想要的可靠性，您可以：

：一种。底部滚动条，只需设置最大宽度和溢出x滚动：

.large-table-container-1 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}

演示：

＆＃13;
＆＃13; 
.large-table-container-1 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-container-1 table {
  
}

/*misc*/
td {
  border: 1px solid gray;
}

th {
  text-align: left;
}
＆＃13; 
<div class="large-table-container-1">
  <table>
    <thead>
      <tr>
        <th colspan="20">
          Bottom scrollbar:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
      </tr>
    </tbody>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

<强> B中。顶部滚动条，有点hacky，使用180度变换将滚动条旋转到顶部，然后再旋转180度以放回内容。

.large-table-container-2 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
  transform:rotateX(180deg);
}

.large-table-container-2 table {
  transform:rotateX(180deg);
}

您可能希望使用特定于broswser的前缀进行转换，例如-webkit-transform:rotateX(180deg);。

演示：

＆＃13;
＆＃13; 
.large-table-container-2 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
  transform:rotateX(180deg);
}
.large-table-container-2 table {
  transform:rotateX(180deg);
}

/*misc*/
td {
  border: 1px solid gray;
}

th {
  text-align: left;
}
＆＃13; 
<div class="large-table-container-2">
  <table>
    <thead>
      <tr>
        <th colspan="20">
          Top scrollbar:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
      </tr>
    </tbody>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

<强>℃。顶部和底部滚动条，多一点hacky。需要一些JavaScript。使用上面的解决方案表格A并添加一个假的＆＃39;顶部滚动条的div：

<div class="large-table-fake-top-scroll-container-3">
  <div>&nbsp;</div>
</div>
<div class="large-table-container-3">
  <table>...</table>
</div>


.large-table-container-3 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-container-3 table {

}
.large-table-fake-top-scroll-container-3 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-fake-top-scroll-container-3 div {
  background-color: red;/*Just for test, to see the 'fake' div*/
  font-size:1px;
  line-height:1px;
}

还有一个小javascript来抓住顶部假div上的滚动，然后使用jQuery滚动表容器（反之亦然）：

$(function() {
  var tableContainer = $(".large-table-container-3");
  var table = $(".large-table-container-3 table");
  var fakeContainer = $(".large-table-fake-top-scroll-container-3");
  var fakeDiv = $(".large-table-fake-top-scroll-container-3 div");

  var tableWidth = table.width();
  fakeDiv.width(tableWidth);

  fakeContainer.scroll(function() {
tableContainer.scrollLeft(fakeContainer.scrollLeft());
  });
})

演示：

＆＃13;
＆＃13; 
$(function() {
  var tableContainer = $(".large-table-container-3");
  var table = $(".large-table-container-3 table");
  var fakeContainer = $(".large-table-fake-top-scroll-container-3");
  var fakeDiv = $(".large-table-fake-top-scroll-container-3 div");

  var tableWidth = table.width();
  fakeDiv.width(tableWidth);
  
  fakeContainer.scroll(function() {
    tableContainer.scrollLeft(fakeContainer.scrollLeft());
  });
  tableContainer.scroll(function() {
    fakeContainer.scrollLeft(tableContainer.scrollLeft());
  });
})
＆＃13; 
.large-table-container-3 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-container-3 table {
  
}
.large-table-fake-top-scroll-container-3 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-fake-top-scroll-container-3 div {
  background-color: red;
  font-size:1px;
  line-height:1px;
}

/*misc*/
td {
  border: 1px solid gray;
}

th {
  text-align: left;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-table-fake-top-scroll-container-3">
  <div>&nbsp;</div>
</div>
<div class="large-table-container-3">
  <table>
    <thead>
      <tr>
        <th colspan="20">
          Top and bottom scrollbar:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
      </tr>
    </tbody>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

所有三种解决方案的工作完整代码：

＆＃13;
＆＃13; 
$(function() {
  var tableContainer = $(".large-table-container-3");
  var table = $(".large-table-container-3 table");
  var fakeContainer = $(".large-table-fake-top-scroll-container-3");
  var fakeDiv = $(".large-table-fake-top-scroll-container-3 div");

  var tableWidth = table.width();
  fakeDiv.width(tableWidth);
  
  fakeContainer.scroll(function() {
    tableContainer.scrollLeft(fakeContainer.scrollLeft());
  });
  tableContainer.scroll(function() {
    fakeContainer.scrollLeft(tableContainer.scrollLeft());
  });
})
＆＃13; 
/*Bottom scrollbar*/
.large-table-container-1 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-container-1 table {
  
}

/*Top scrollbar*/
.large-table-container-2 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
  transform:rotateX(180deg);
}
.large-table-container-2 table {
  transform:rotateX(180deg);
}

/*Top and bottom scrollbar*/
.large-table-container-3 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-container-3 table {
  
}
.large-table-fake-top-scroll-container-3 {
  max-width: 200px;
  overflow-x: scroll;
  overflow-y: auto;
}
.large-table-fake-top-scroll-container-3 div {
  background-color: red;
  font-size:1px;
  line-height:1px;
}

/*misc*/
td {
  border: 1px solid gray;
}

th {
  text-align: left;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-table-container-1">
  <table>
    <thead>
      <tr>
        <th colspan="20">
          Bottom scrollbar:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="large-table-container-2">
  <table>
    <thead>
      <tr>
        <th colspan="20">
          Top scrollbar:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
      </tr>
    </tbody>
  </table>
</div>


<div class="large-table-fake-top-scroll-container-3">
  <div>&nbsp;</div>
</div>
<div class="large-table-container-3">
  <table>
    <thead>
      <tr>
        <th colspan="20">
          Top and bottom scrollbar:
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>00</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
        <td>08</td>
        <td>09</td>
      </tr>
    </tbody>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我找到了将滚动条放在桌子顶部的解决方案。 请看看： Demo in Fiddle 希望对您有所帮助。

    `.dataTables_scrollBody {
        transform:rotateX(180deg);
    }
    .dataTables_scrollBody table {
        transform:rotateX(180deg);
    }`

    $(document).ready(function() {
    $('#example').DataTable( {
            scrollX : 'TRUE',
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
    $('#example tfoot tr').insertAfter($('#example thead tr'));
} );

答案 2 :(得分：0)

请看一下类似的查询：

horizontal scrollbar on top and bottom of table

此解决方案适用于我的数据表。

答案 3 :(得分：0)

我使用css / jQuery显示标题的滚动条，并将主体scrollLeft设置为标题的向左滚动。

示例：

// Put top scroller
$('.dataTables_scrollHead').css({
    'overflow-x':'scroll'
}).on('scroll', function(e){
    var scrollBody = $(this).parent().find('.dataTables_scrollBody').get(0);
    scrollBody.scrollLeft = this.scrollLeft;
    $(scrollBody).trigger('scroll');
});

答案 4 :(得分：-2)

您可以在css中使用overflow属性。

您应该在两个不同的表中分隔表的正文和标题。 然后将第二个表（原始表的主体）放在div中，并在此div上使用溢出。

DEMO in jsfiddle 

<html>
<head>
    <style>
        .myOverflow {
            height: 100px; 
            overflow-y: scroll; 
            display: inline-block;
        }
    </style>
</head>
<body>
    <table id="HeaderTable">
        <tr>
            <td class="col1">Column1</td>
            <td class="col2">Column2</td>
        </tr>
    </table>
    <div class="myOverflow">
        <table id="BodyTable">
            <tr>
                <td class="col1">a</td>
                <td class="col2">b</td>
            </tr>
            <tr>
                <td>c</td>
                <td>d</td>
            </tr>
            <tr>
                <td>e</td>
                <td>f</td>
            </tr>
        </table>
    </div>
</body>
</html>

<script>
</script>
相关问题
最新问题