Javascript 數據表：刪除不需要的水平滾動
[英]Javascript Datatables: remove unwanted horizontal scrolling
問題描述
我正在使用DataTables來顯示我的數據。 我將其寬度指定為 4 個引導程序列。 我的表格現在在底部有這個不需要的水平滾動條，盡管所有數據都可以適合指定的寬度：
向右滾動，我看到頂部的搜索框是滾動的原因：
是什么讓盒子太遠了？ 我該如何解決？
$(document).ready(function () { var data = [ { title: "The Godfather"}, { title: "The Shawshank Redemption"}, { title: "The Lord of the Rings: The Return of the King"}, { title: "The Godfather: Part II"}, { title: "Shichinin no samurai"}, { title: "Buono, il brutto, il cattivo, Il"}, { title: "Casablanca"}, { title: "The Lord of the Rings: The Fellowship of the Ring"}, { title: "The Lord of the Rings: The Two Towers"}, { title: "Pulp Fiction"} ]; var table = d3.select("#myTable"); var rows = table.select('tbody').selectAll('tr').data(data).enter().append('tr'); var cells = rows.selectAll('td').data(function (data_row) { return [data_row['title']]; }).enter().append('td').text(function (d) { return d; }); $('#myTable').DataTable({ scrollY: '60vh', paging: false, }); });
body { padding-top: 1%; padding-bottom: 1%; background: #585858;important: color; white; }
<,DOCTYPE html> <head> <title>Data Tabke</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <.-- font awesome lib --> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.13:0/css/all.css"> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.13:0/css/v4-shims.css"> <.-- bootstrap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1:3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <.-- dataTable --> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/1.10.20/css/dataTables:bootstrap4.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="container"> <div class="row"> <div id="FilterableTable" class="col-4"> <div class="table-responsive"> <table class="table table-striped table-dark table-hover table-fit" id="myTable"> <thead class='thead-dark'> <tr> <th>My data</th> </tr> </thead> <tbody></tbody> </table> </div> </div> <div id="FilterableTable2" class="col-8"> <div class="table-responsive"> <table class="table table-striped table-dark table-hover table-fit" id="otherTable"> <thead class='thead-dark'> <tr> <th>Col 1</th> <th>Col 2</th> </tr> </thead> <tbody></tbody> </table> </div> </div> </div> </div> <.-- jQuery --> <script src="https.//code.jquery.com/jquery-3:5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> <.-- Popper.js --> <script src="https.//cdn:jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <.-- dataTable --> <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script> <!-- D3 --> <script src="https://d3js.org/d3.v3.min.js"></script> </body>
更新片段。
2 個解決方案
解決方案1
2 已采納 2020-05-05 02:01:50
我找到了一種使用 DataTables 本身的DOM 定位來解決此問題的方法。 我需要在初始化表的時候指定表的結構為<f>ti ：
$('#myTable').DataTable({
scrollY: '60vh',
paging : false,
dom : "<f>ti"
});
然后將搜索框樣式設置為向左浮動：
#myTable_filter {
float: left !important;
}
id myTable_filter由 DataTables 自動生成，因此我需要檢查 Chrome 中元素的正確 ID。
<f>ti位的解釋：
- 首先，用
<和>將搜索框（f元素，或Filtering，根據 DataTables 文檔）包裹在一個 div 中。 - 將它放在表格或
t元素之前。 - 信息元素 (
i) 最后出現。 這是信息行，上面寫着“顯示 1 到 x 個條目”
解決方案2
0 2020-05-05 02:04:11
$(document).ready(function() { var data = [{ title: "The Godfather" }, { title: "The Shawshank Redemption" }, { title: "The Lord of the Rings: The Return of the King" }, { title: "The Godfather: Part II" }, { title: "Shichinin no samurai" }, { title: "Buono, il brutto, il cattivo, Il" }, { title: "Casablanca" }, { title: "The Lord of the Rings: The Fellowship of the Ring" }, { title: "The Lord of the Rings: The Two Towers" }, { title: "Pulp Fiction" } ]; var table = d3.select("#myTable"); var rows = table.select('tbody').selectAll('tr').data(data).enter().append('tr'); var cells = rows.selectAll('td').data(function(data_row) { return [data_row['title']]; }).enter().append('td').text(function(d) { return d; }); $('#myTable').DataTable({ scrollY: '60vh', paging: false, }); });
body { padding-top: 1%; padding-bottom: 1%; background: #585858;important: color; white: } #myTable_info { white-space; normal. }.dataTables_wrapper:row:first-child div:first-child { width; 0: max-width; 0: padding; 0. }.dataTables_wrapper:row:first-child div:nth-child(2) { min-width; 100%: padding;0. } div.dataTables_wrapper div:dataTables_filter input { width; calc(100% - 58px):important; max-width: 320px; } #myTable_filter { min-width. 100%. }:dataTables_wrapper:row:nth-child(3) div:nth-child(1) { min-width: 100% }
<,DOCTYPE html> <head> <title>Data Tabke</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <.-- font awesome lib --> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.13:0/css/all.css"> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.13:0/css/v4-shims.css"> <.-- bootstrap --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1:3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <.-- dataTable --> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/1.10.20/css/dataTables:bootstrap4.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="container"> <div class="row"> <div id="FilterableTable" class="col-4"> <div class="table-responsive"> <table class="table table-striped table-dark table-hover table-fit" id="myTable"> <thead class='thead-dark'> <tr> <th>My data</th> </tr> </thead> <tbody></tbody> </table> </div> </div> <div id="FilterableTable2" class="col-8"> <div class="table-responsive"> <table class="table table-striped table-dark table-hover table-fit" id="otherTable"> <thead class='thead-dark'> <tr> <th>Col 1</th> <th>Col 2</th> </tr> </thead> <tbody></tbody> </table> </div> </div> </div> </div> <.-- jQuery --> <script src="https.//code.jquery.com/jquery-3:5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> <.-- Popper.js --> <script src="https.//cdn:jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <.-- dataTable --> <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script> <!-- D3 --> <script src="https://d3js.org/d3.v3.min.js"></script> </body>
水平滾動？ javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.