Datatable rows extend past table boundary, or are too narrow

问题

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

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.

All assistance is appreciated.

The form renders as:

The partial form is:

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

The datatable is initialized as:

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

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>

回答1:

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.

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.

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.

来源：https://stackoverflow.com/questions/26126619/datatable-rows-extend-past-table-boundary-or-are-too-narrow

标签

jquery

ruby-on-rails

datatables

jquery-datatables