DataTables响应式子行不起作用

Question

Responsive Datatable with child rows works on DataTables own page example, but the same code dosen't work on my HTML page. 带有子行的响应式数据表在DataTables自己的页面示例中可用，但是相同的代码在我的HTML页面中不起作用。 No '+' button shows and all the child columns are included in the main table. 没有显示“ +”按钮，并且所有子列都包含在主表中。 I have tried using all the examples but getting the same result. 我尝试使用所有示例，但得到相同的结果。

table without expand/collapse icon 没有展开/折叠图标的表格

I'm using this example for this question 我正在使用这个例子来解决这个问题

<html>

<head>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">

    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>

    <script type="text/javascript" class="init">

     $(document).ready(function() {
        $('#example').DataTable( {
            responsive: {
                details: {
                    type: 'column',
                    target: 'tr'
                }
            },
            columnDefs: [ {
                className: 'control',
                orderable: false,
                targets:   0
            } ],
            order: [ 1, 'asc' ]
        } );
    } );

    </script>

</head>

<body>

    <table id="example" class="display nowrap" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
            </tr>
            <tr>
                <td></td>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>8422</td>
            </tr>

        </tbody>
        <tfoot>
            <tr>
                <th></th>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
            </tr>
        </tfoot>
    </table>

</body>

</html>

Also, copying the whole source of the example page in local html gives the same result. 同样，将示例页面的整个源代码复制到本地html中也会得到相同的结果。 But the example in the page itself ie by opening page as link in datatables site works in chrome. 但是页面本身中的示例（即通过打开页面作为datatables网站中的链接）适用于chrome。

Answer 1

as I said in the forum , it does work - have you tried resizing the screen? 如我在论坛上所说，它确实有效-您是否尝试过调整屏幕大小？ Bear in mind you only see the child rows when the screen has shrunk enough that the whole line cannot be displayed. 请记住，只有当屏幕缩小到足以显示整行时，您才能看到子行。

DataTables响应式子行不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-03-23 12:02:44

DataTables响应式子行不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-03-23 12:02:44

解决方案1
0 已采纳 2018-03-23 12:02:44