如何将dataTables的水平滚动条放在桌面上？

Question

如何将dataTables的水平滚动条放在桌面上？

msn*_*zko 6 javascript datatable jquery twig

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

Answer 1

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

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

Run Code Online (Sandbox Code Playgroud)

根据您想要的可靠性,您可以:

A.底部滚动条,只需设置最大宽度和溢出x滚动:

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

Run Code Online (Sandbox Code Playgroud)

演示:

.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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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);
}

Run Code Online (Sandbox Code Playgroud)

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

演示:

.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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

C.顶部和底部滚动条,多一点hacky.需要一些JavaScript.使用上面的解决方案A并为顶部滚动条添加'假'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;
}

Run Code Online (Sandbox Code Playgroud)

还有一个小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());
  });
})

Run Code Online (Sandbox Code Playgroud)

演示:

$(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());
  });
})

Run Code Online (Sandbox Code Playgroud)

.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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

$(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());
  });
})

Run Code Online (Sandbox Code Playgroud)

/*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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Abo*_*ker 5

我找到了将滚动条放在桌子顶部的解决方案。请看： 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'));
} );

Run Code Online (Sandbox Code Playgroud)

Answer 3

Sta*_*ker 5

我使用 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');
});

Run Code Online (Sandbox Code Playgroud)

Answer 4

Ema*_*oun -3

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

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

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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，2 月前
查看次数：	10478 次
最近记录：	6 年，11 月前