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

时间：2016-04-14 13:27:19

标签： javascript jquery html css datatables

我一直在尝试做一个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>

1 个答案:

答案 0 :(得分：3)

创建像insideTable这样的元素时，您应该在内部表中添加一个类：

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

在你的CSS中，你可以在里面设置这个样式：

.insideTable {
  width: 100%;
}

这是你想要达到的目标吗？ Here is a demo plunker

修改

将类添加到表后，您可以将每个元素设置为内部样式，如：

.insideTable tbody {
  text-align: center;
}
相关问题
最新问题