Question

我在ASP.NET应用上使用jQuery DataTables plugin。外部表的行是可扩展的，以显示每行下面的嵌套内部表。当屏幕缩小时，两个表都必须通过删除列来响应。

问题是内部表没有表现出响应行为。无论屏幕有多小，内表都不会丢弃任何列。外表的响应行为很好。

（注意：如果您想直接跳到显示问题的某些代码check out this jsfiddle）。

以下是包含所有列的外表：

以下是其中一行展开的相同视图：

这是一个非常小的屏幕上的外表。您可以看到最后两列已被删除，并且没有显示水平滚动条（到目前为止一切正常）：

这是相同的事情，但扩展了其中一行。您可以看到所有内部表格的列都显示，并且需要水平滚动条才能看到它们（这是问题）：

这个插件是不是只支持嵌套表上的响应行为，还是我做错了什么？

下面是代码，它是根据DataTables网站上的一个例子改编的。此外，here is a jsfiddle具有相同的代码。

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.1/css/jquery.dataTables.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css"/>

    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>

    <body>
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="details-control">+</td>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>$380,000</td>
                </tr>
                <tr>
                    <td class="details-control">+</td>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>$$170,750</td>
                </tr>
                <tr>
                    <td class="details-control">+</td>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>$86,000</td>
                </tr>
            </tbody>
        </table>

        <script>
            /* Formatting function for row details - modify as you need */
            function format() {
                return '<table id="inner" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                    '<thead><tr><th>Subgrid 1</th><th>Subgrid 2</th><th>Subgrid 3</th><th>Subgrid 4</th></tr></thead>' +
                    '<tbody>'+
                    '<tr>'+
                        '<td>Some data</td>'+
                        '<td>Some more data here</td>'+
                        '<td>Some really loooonnggg data in this column</td>'+
                        '<td>Yet more data</td>'+
                    '</tr>'
                    '</tbody>'+
                '</table>';
            }

            var options = {
                responsive: {
                    details: false
                },
                paging: false,
                lengthChange: false,
                filtering: false,
                info: false,
                searching: false
            };

            $(document).ready(function() {
                var table = $('#example').DataTable(options);

                $('#example tbody').on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row( tr );

                    if ( row.child.isShown() ) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row
                        row.child(format()).show();
                        $('#inner').DataTable(options);

                        tr.addClass('shown');
                    }
                } );
            } );
        </script>
    </body>
</html>

我看到了this post，但它似乎没有回答这个问题。

jquery DataTables是否支持嵌套表中的响应行为？

0 个答案: