数据表行超出表边界，或者太窄 [英] Datatable rows extend past table boundary, or are too narrow
问题描述
Ruby 2.0.0，Rails 4.0.3，jquery-datatables-rails 2.2.3(带有DataTables 1.10.1)，jquery-rails 3.1.1，jquery-ui-rails 5.0.0，lodash-rails 2.4 .1，bootstrap-sass 3.2.0.1
Ruby 2.0.0, Rails 4.0.3, jquery-datatables-rails 2.2.3 (w/DataTables 1.10.1), jquery-rails 3.1.1, jquery-ui-rails 5.0.0, lodash-rails 2.4.1, bootstrap-sass 3.2.0.1
我无法使数据表正确格式化.要么列超出了表单，要么列太窄.我为此尝试了无数种修复方法.我已经设置了columnDefs和列宽度.我已经在表格标题中设置了HTML宽度.我将autoWidth设置为false和true.我已经动态设置了CSS宽度.我已经安装了各种建议的CSS修改.我已经尝试了所有可以找到的东西.令人沮丧的是，没有什么可以改变任何东西.格式始终完全相同，就像完全忽略了我的所有尝试一样.这些表单被配置为响应式的.我也禁用了它.没有骰子.
I am having trouble getting Datatables to format correctly. Either the columns overrun the form, or the columns are too narrow. I've tried a myriead of fixes for this. I have set columnDefs and column width. I've set HTML width in the table headings. I've set autoWidth false and true. I've set the CSS width dynamically. I've installed various recommended CSS modifications. I've tried about everything I can find. The frustrating part is that nothing changes anything. The format is always exactly the same, like it is totally ignoring all my attempts. These forms are configured to be responsive. I've also disabled that. No dice.
除格式化外，表还可以正常工作.他们排序.他们搜索，他们页面.它们只是格式不正确.再次，我将其最小化为一种形式，并将所有无关的信息都删除了.
Other than the formatting, the tables work perfectly. They sort. They search, They page. They just won't format correctly. Again, I've minimized this to one form and taken all extraneous information out to no avail.
感谢所有帮助.
该表单呈现为:
部分形式为:
<div class="span12">
<p>
<table id="carstable" class="display table-striped" width="80%"
data-source="<%= cars_path(format: "json") %>">
<thead>
<tr>
<th data-class="expand">Stock No.</th>
<th>Year</th>
<th>Make</th>
<th data-hide="phone">Model</th>
<th data-hide="phone">Color</th>
<th>Status</th>
<th data-hide="phone,tablet">Mileage</th>
<th data-hide="phone,tablet">MSRP</th>
<th data-hide="phone,tablet">Aged</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
数据表初始化为:
$(document).ready(function () {
var breakpointDefinition, tableElement;
var rHelperCar;
rHelperCar = void 0;
breakpointDefinition = {
tablet: 1300,
phone: 480
};
tableElement = $("#carstable");
tableElement.dataTable({
responsive: false,
autoWidth: false,
pagingType: "full",
jQueryUI: true,
processing: true,
serverSide: true,
ajax: $('#carstable').data('source'),
preDrawCallback: function () {
if (!rHelperCar) {
rHelperCar = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
},
rowCallback: function (nRow) {
rHelperCar.createExpandIcon(nRow);
},
drawCallback: function (oSettings) {
rHelperCar.respond();
}
});
已保存的HTML页面:
Saved HTML Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/images/favicon.ico" rel="icon" />
<title>Car</title>
<meta name="description" content="Car">
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
...
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
</head>
<body>
<header>
<div class="navbar navbar-inverse navbar-fixed-top">
<a class="navbar-brand" href="/"><h4>Car</h4></a>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Home</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/logout">Logout</a></li>
<li><a href="/cars">Cars</a></li>
</ul>
</div>
</div>
</div>
</header>
<main role="main">
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
--- This associate is: David Hanson
</div>
<div class="panel-body">
<div class="span12">
<p>
<table id="carstable" class="display table-striped" width="80%"
data-source="/cars.json">
<thead>
<tr>
<th data-class="expand">Stock No.</th>
<th>Year</th>
<th>Make</th>
<th data-hide="phone">Model</th>
<th data-hide="phone">Color</th>
<th>Status</th>
<th data-hide="phone,tablet">Mileage</th>
<th data-hide="phone,tablet">MSRP</th>
<th data-hide="phone,tablet">Aged</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
推荐答案
在DataTables作者Allan的帮助下，我真正了解了问题之后，这并不是一个困难的解决方案.这些行仅比表可以处理的宽，从而迫使其溢出.我发现index.html.erb使用包含div元素的布局来呈现部分索引，该元素将表宽度限制为col-md-6.我将宽度更改为col-md-9，这解决了基本问题.
This wasn't a difficult fix once I really understood the problem with help from the DataTables author, Allan. The rows were simply wider than the table could handle, forcing it to overflow. I found that index.html.erb was rendering the index partial with a layout containing a div element that restricted the table width to col-md-6. I changed the width to col-md-9 and that resolved the basic problem.
随着浏览器宽度的缩小和设备类型的更改，行宽仍然是个问题.这似乎是breakpointDefinition的问题.似乎对该参数进行微调应该可以解决问题，以便适当地隐藏列.
Row width continues to be problematic as the browser width shrinks and device types change. That seems to be a problem with breakpointDefinition. It seems that fine-tuning that parameter should solve the problem so that columns are hidden appropriately.
更新:还注意到我正在显示的部分具有span12，这会影响行的长度.使表大小和行长度兼容肯定是有意义的.有趣的是，一旦您弄清楚其中的一部分，所有这些工作是多么简单.当然，我还有很多东西要学习.
Update: Also noticed that the partial I was displaying had span12 which influenced the row length. It would certainly make sense to have the table size and row length be compatible. Funny how simply all this works once you figure some of it out. Surely, I have much more to learn.
这篇关于数据表行超出表边界，或者太窄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
