带有嵌套表的数据表没有功能答案

【问题标题】：Datatable with nested table doesn't have functionality带有嵌套表的数据表没有功能
【发布时间】：2016-04-19 13:46:05
【问题描述】：

这个 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/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.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/responsive/2.0.2/css/responsive.dataTables.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="icon" href="./resources/logo.jpg">



<script>     

    $(document).ready(function() {

        var oTable = $('#maintable').dataTable( {

            "aoColumnDefs": [
                { "bSortable": true, "aTargets": [ 0 ] }
            ],
            "aaSorting": [[1, 'asc']],

            "language": {
                "lengthMenu": "Mostrar _MENU_ datos por pagina.",
                "zeroRecords": "Nada fue encontrado.",
                "info": "Mostrando _PAGE_ de _PAGES_",
                "infoEmpty": "No hay datos disponibles",
                "infoFiltered": "(filtrado de _MAX_ datos totales)",
                "search": "Buscar:",
                "paginate": {
                    "first":      "Primero",
                    "last":       "Ultimo",
                    "next":       "Proximo",
                    "previous":   "Previo"
                }
            }


        }); 
    });    

</script>   




    <title>Consulta de facturas atrasadas</title>

    <style type="text/css">
        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; width: 100%;}     

        #footer { background:#fff; width: 100%;}
        #footer-inner { margin:auto; text-align:center; padding:12px;}
        #footer a {color:blue;text-decoration:none;}

        #maintable {

            text-align: center;             

        }

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


        }

        #container {

            width:90%;
            margin: 0 auto;

        }

        #titulo {

            margin: 0 auto;

        }


        div.slider {
            display: none;
        }

        table.dataTable tbody td.no-padding {
            padding: 0;
        }

        th {

            text-align: center;

        }

        .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;}

    </style>

</head>

<body>

        <br>
    <div id="page">
        <header id="header">
            <div id="header-inner"> 
                <div id="logo">

                </div>

                <div id="titulo">
                    <h2>Consulta de facturas atrasadas</h2>
                </div>

                <div class="clr"></div>
            </div>
        </header>
        <br>    

        <div id="container">

        <table id="maintable" class="row-border hover order-column display table table-striped" cellspacing="0" width="100%" style="border-collapse:collapse;">
            <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>


            <tbody>

                <tr data-toggle="collapse" data-target="#1" class="accordion-toggle">

                    <td>Codigo</td>
                    <td>2011/02/02</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 class="hiddenRow"><div class="accordian-body collapse" id="1"> 
                          <table id="a" class="table table-striped" style="width:100%; text-align: center">

                                  <thead>

                                    <tr> 
                                        <th>Factura</th> 
                                        <th>Fecha</th> 
                                        <th>Dias</th> 
                                        <th>Monto</th> 
                                        <th>Pendiente</th> 
                                        <th>Vendedor</th> 
                                    </tr>


                                  </thead>

                                  <tbody>

                                    <tr> 
                                        <td>Factura</td> 
                                        <td>2015/04/15</td> 
                                        <td>Factura</td> 
                                        <td>Factura</td> 
                                        <td>Factura</td> 
                                        <td>Factura</td> 
                                    </tr>

                                    <tr> 
                                        <td>Factura</td> 
                                        <td>2011/04/15</td> 
                                        <td>Factura</td> 
                                        <td>Factura</td> 
                                        <td>Factura</td> 
                                        <td>Factura</td> 
                                    </tr>

                                  </tbody>

                          </table>
                        </div>
                        </td>

                    </tr>




                <tr data-toggle="collapse" data-target="#2" class="accordion-toggle">

                    <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 class="hiddenRow"><div class="accordian-body collapse" id="2"> 
                          <table id="b" class="table table-striped" style="width:100%; text-align: center">

                                  <thead>

                                    <tr> 
                                        <th>Factura</th> 
                                        <th>Fecha</th> 
                                        <th>Dias</th> 
                                        <th>Monto</th> 
                                        <th>Pendiente</th> 
                                        <th>Vendedor</th> 
                                    </tr>


                                  </thead>

                                  <tbody>

                                    <tr> 
                                        <td>Factura</td> 
                                        <td>2012/04/15</td> 
                                        <td>Factura</td> 
                                        <td>Factura</td> 
                                        <td>Factura</td> 
                                        <td>Factura</td> 
                                    </tr>

                                    <tr> 
                                        <td>Factura</td> 
                                        <td>2011/04/15</td> 
                                        <td>Factura</td> 
                                        <td>Factura</td> 
                                        <td>Factura</td> 
                                        <td>Factura</td> 
                                    </tr>

                                  </tbody>

                          </table>
                        </div>
                        </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>2011/02/02</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>  

        <script>
          var table = document.getElementById("a");
          for(var i = 0; i < table.rows.length; i ++) {
            var d = new Date(table.rows[i].cells[1].innerHTML).getTime();
            var difference = new Date().getTime();
            console.log(((difference - d)/86400000) > 100);
            if(((difference - d)/86400000) > 1000)
              table.rows[i].style.background = "red";
          }
        </script>   




                <div class="clr"></div>



        <footer id="footer">

            <div id="footerblurb">
                <br>
            </div>

            <div id="footer-inner">

                <div class="clr"></div>
            </div>

        </footer>

    </div>

</body>

【问题讨论】：

提供一个工作示例。阅读、编辑和测试都很乏味。您可以使用 stacksn-ps （在 stackoverflow 的编辑器内）或使用外部服务（如 jsfiddle.net ）制作一个工作小提琴。阅读更多：stackoverflow.com/help/how-to-ask || stackoverflow.com/help/mcve
给你：jsfiddle.net/ocrhtupj
您的嵌套表没有任何功能，因为您从来没有添加它。您需要转到数据表的文档，查看打开的事件侦听器，然后在打开一行时初始化新的数据表。也许这很疯狂，但我在谷歌搜索它显示了 60.000 个结果。 google.es/search?q=js+datatable+nested+tables.

标签： javascript jquery html css datatables

【解决方案1】：

您的表没有正确的结构，thead 中的th 元素数量与tbody 中td 元素的数量应该匹配。这是更正的示例https://jsfiddle.net/ocrhtupj/1/，但行详细信息未正确显示。

请参阅Child rows 以使用 jQuery DataTables 插件正确实现具有额外详细信息的表。

【讨论】：

非常感谢！！！它现在可以与数据表功能一起使用，并且我向添加了一个 colspan 属性，以便它显示全宽。行详细信息现在不显示它们应该显示的位置，但我会调查一下。
@AdrianGonzalez，请注意 jQuery DataTables 不支持表格列中的colspan，这就是为什么我建议根据文档来实现它。