每行中都有一个嵌套表的数据表

Datatable with a nested table inside every row

本文关键字：数据表 嵌套 有一个      更新时间：2024-06-18

我一直在尝试制作一个HTML文档，该文档使用一个数据表，每一行都包含一个内部行，另一个表详细说明了该行的更多信息，但我遇到了内部行的格式和功能问题（它只是停留在左侧，没有样式）。

/* Formating function for row details */
function fnFormatDetails(oTable, nTr) {
  var aData = oTable.fnGetData(nTr);
  var sOut = '<table>';
  sOut += '<thead> <tr> <th>Factura</th> <th>Fecha</th> <th>Dias</th> <th>Monto</th> <th>Pendiente</th> <th>Vendedor</th> </tr></thead>';
  sOut += '<tbody> <tr> <td>Factura</td> <td>Factura</td> <td>Factura</td> <td>Factura</td> <td>Factura</td> <td>Factura</td> </tr> </tbody> ';
  sOut += '</table>';
  return sOut;
}
$(document).ready(function() {
  /*
   * Insert a 'details' column to the table
   */
  var nCloneTh = document.createElement('th');
  var nCloneTd = document.createElement('td');
  nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">';
  nCloneTd.className = "center";
  $('#example thead tr').each(function() {
    this.insertBefore(nCloneTh, this.childNodes[0]);
  });
  $('#example tbody tr').each(function() {
    this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
  });
  /*
   * Initialse DataTables, with no sorting on the 'details' column
   */
  var oTable = $('#example').dataTable({
    "aoColumnDefs": [{
      "bSortable": false,
      "aTargets": [0]
    }],
    "aaSorting": [
      [1, 'asc']
    ]
  });
  /* Add event listener for opening and closing details
   * Note that the indicator for showing which row is open is not controlled by DataTables,
   * rather it is done here
   */
  $('#example tbody td img').on('click', function() {
    var nTr = $(this).parents('tr')[0];
    if (oTable.fnIsOpen(nTr)) {
      /* This row is already open - close it */
      this.src = "./resources/details_open.png";
      oTable.fnClose(nTr);
    } else {
      /* Open this row */
      this.src = "./resources/details_close.png";
      oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
    }
  });
});
html,
#page {
  padding: 0;
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  color: #959595;
  font: normal 12px/2.0em Sans-Serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: darkblue;
  text-align: center;
}
#page {
  background: #fff;
}
#header,
#footer {
  margin: 0;
  padding: 0;
}
#logo {
  padding: 0;
  width: auto;
  text-align: center;
  margin: auto;
}
#header {
  background: #fff;
}
#header-inner {
  margin: 0 auto;
  padding: 0;
}
#footerblurb {
  background: #d3d3f9;
  color: blue;
}
#footer {
  background: #fff;
}
#footer-inner {
  margin: auto;
  text-align: center;
  padding: 12px;
}
#footer a {
  color: blue;
  text-decoration: none;
}
.hiddenRow {
  padding: 0 !important;
}
#events {
  margin-bottom: 1em;
  padding: 1em;
  background-color: #f6f6f6;
  border: 1px solid #999;
  border-radius: 3px;
  height: 100px;
  overflow: auto;
}
td.highlight {
  background-color: whitesmoke !important;
}
.details-control {
  cursor: pointer;
}
div.slider {
  display: none;
}
table.dataTable tbody td.no-padding {
  padding: 0;
}
.bodycontainer {
  max-height: 450px;
  width: 100%;
  margin: 0;
  overflow-y: auto;
}
#col-lg-6 {
  margin: auto;
}
#formulario {
  margin: auto;
  column-width: 80%;
}
.clr {
  clear: both;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 0px;
  line-height: 0px;
}
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
  <title>Consulta de facturas atrasadas</title>
</head>
<body>
  <br>
  <div id="page">
    <header id="header">
      <div id="header-inner">
        <div id="logo">
          <h1></h1>
        </div>
        <div class="clr"></div>
      </div>
    </header>
    <br>
    <table id="example" class="row-border hover order-column display" cellspacing="0" width="90%">
      <thead>
        <tr>
          <th>Codigo</th>
          <th>Nombre</th>
          <th>Propietario</th>
          <th>Direccion</th>
          <th>Ciudad</th>
          <th>Sector</th>
          <th>Cedula</th>
          <th>Tel. 1</th>
          <th>Tel. 2</th>
          <th>Celular</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Codigo</th>
          <th>Nombre</th>
          <th>Propietario</th>
          <th>Direccion</th>
          <th>Ciudad</th>
          <th>Sector</th>
          <th>Cedula</th>
          <th>Tel. 1</th>
          <th>Tel. 2</th>
          <th>Celular</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Codigo</td>
          <td>Nombre</td>
          <td>Propietario</td>
          <td>Direccion</td>
          <td>Ciudad</td>
          <td>Sector</td>
          <td>Cedula</td>
          <td>Tel. 1</td>
          <td>Tel. 2</td>
          <td>Celular</td>
        </tr>
        <tr>
          <td>Codigo</td>
          <td>Nombre</td>
          <td>Propietario</td>
          <td>Direccion</td>
          <td>Ciudad</td>
          <td>Sector</td>
          <td>Cedula</td>
          <td>Tel. 1</td>
          <td>Tel. 2</td>
          <td>Celular</td>
        </tr>
        <tr>
          <td>Codigo</td>
          <td>Nombre</td>
          <td>Propietario</td>
          <td>Direccion</td>
          <td>Ciudad</td>
          <td>Sector</td>
          <td>Cedula</td>
          <td>Tel. 1</td>
          <td>Tel. 2</td>
          <td>Celular</td>
        </tr>
        <tr>
          <td>Codigo</td>
          <td>Nombre</td>
          <td>Propietario</td>
          <td>Direccion</td>
          <td>Ciudad</td>
          <td>Sector</td>
          <td>Cedula</td>
          <td>Tel. 1</td>
          <td>Tel. 2</td>
          <td>Celular</td>
        </tr>
        <tr>
          <td>Codigo</td>
          <td>Nombre</td>
          <td>Propietario</td>
          <td>Direccion</td>
          <td>Ciudad</td>
          <td>Sector</td>
          <td>Cedula</td>
          <td>Tel. 1</td>
          <td>Tel. 2</td>
          <td>Celular</td>
        </tr>
      </tbody>
    </table>

    <div class="clr"></div>
    <div id="footerblurb">
      <br>
    </div>
    <footer id="footer">
      <div id="footer-inner">
        <p></p>
        <div class="clr"></div>
      </div>
    </footer>
  </div>
</body>
</html>

创建insideTable:这样的元素时，应该向内部表中添加一个类

function fnFormatDetails(oTable, nTr) {
  var aData = oTable.fnGetData(nTr);
  var sOut = '<table class="insideTable">';
  // ... the other lines
}

在你的css中，你可以在内部表格中设置样式：

.insideTable {
  width: 100%;
}

这就是你想要实现的吗？这是一个演示plunker。

编辑

在将类添加到表中后，您可以对内部的每个元素进行样式设置，如：

.insideTable tbody {
  text-align: center;
}
相关文章：