堆栈内存溢出
  简体   繁体   English

Javascript 数据表：删除不需要的水平滚动

[英]Javascript Datatables: remove unwanted horizontal scrolling

 原文  2020-05-05 00:05:49  8   2    javascript/ html/ css/ datatables

问题描述

I'm using DataTables to display my data.我正在使用DataTables来显示我的数据。 I specify its width to be 4 bootstrap columns.我将其宽度指定为 4 个引导程序列。 My table now has this unwanted horizontal scroll at the bottom although all data can fit in the specified width:我的表格现在在底部有这个不需要的水平滚动条，尽管所有数据都可以适合指定的宽度：

在此处输入图像描述

Scrolling to the right, I see that the search box at the top is the reason for this scrolling:向右滚动，我看到顶部的搜索框是滚动的原因：

在此处输入图像描述

What makes the box lie too far right?是什么让盒子太远了？ How do I fix this?我该如何解决？ 

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

UPDATE with snippet.更新片段。

2 个解决方案

解决方案1
 2 已采纳  2020-05-05 02:01:50

I have found a way to resolve this using DOM positioning of DataTables itself.我找到了一种使用 DataTables 本身的DOM 定位来解决此问题的方法。 I need to specify the structure of the table as <f>ti when initializing the table:我需要在初始化表的时候指定表的结构为<f>ti ：

$('#myTable').DataTable({
    scrollY: '60vh',
    paging :  false,
    dom    : "<f>ti"
});

and then style the searchbox to float left as:然后将搜索框样式设置为向左浮动：

#myTable_filter {
    float: left !important;
}

The id myTable_filter is autogenerated by DataTables, so I need to check the correct ID of the element in Chrome. id myTable_filter由 DataTables 自动生成，因此我需要检查 Chrome 中元素的正确 ID。

Explanation of the <f>ti bit: <f>ti位的解释：

  • First, wrap the search box (the f element, or Filtering , according to DataTables documentation) in a div with < and > .首先，用<和>将搜索框（ f元素，或Filtering ，根据 DataTables 文档）包裹在一个 div 中。
  • Put it before the table, or the t element.将它放在表格或t元素之前。
  • The information element (the i ) comes last.信息元素 ( i ) 最后出现。 This is the info line that says "Showing 1 to x of x entries"这是信息行，上面写着“显示 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 水平滚动？ javascript - horizontal scrolling? javascript 通过javascript的div的水平滚动 - Horizontal Scrolling of a div by javascript 数据表-仅对某些列进行水平滚动 - Datatables - horizontal scrolling for only certain columns 使用Javascript的水平滚动菜单 - Horizontal scrolling menu with Javascript 防止使用javascript进行水平滚动？ - Prevent horizontal scrolling with javascript? Javascript：自动水平滚动 - Javascript: automatical horizontal scrolling 删除JavaScript中不需要的逗号 - remove unwanted commas in JavaScript JavaScript：使用鼠标滚轮进行水平滚动 - JavaScript: Horizontal Scrolling with Mouse Wheel 使用JQuery / Javascript进行水平滚动 - Horizontal Scrolling using JQuery/Javascript 使用JavaScript函数进行水平文本滚动？ - Horizontal text scrolling with JavaScript function?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM