DataTables响应式子行不起作用

Question

带有子行的响应式数据表在DataTables自己的页面示例中可用，但是相同的代码在我的HTML页面中不起作用。 没有显示“ +”按钮，并且所有子列都包含在主表中。 我尝试使用所有示例，但得到相同的结果。

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

同样，将示例页面的整个源代码复制到本地html中也会得到相同的结果。 但是页面本身中的示例（即通过打开页面作为datatables网站中的链接）适用于chrome。

Answer 1

如我在论坛上所说，它确实有效-您是否尝试过调整屏幕大小？ 请记住，只有当屏幕缩小到足以显示整行时，您才能看到子行。

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