Question

我正在尝试开发以下功能， https://datatables.net/extensions/responsive/examples/display-types/modal.html

我遵循完全相同的步骤但是，我没有获得启动模态对话框的图标，

这是完整的代码，

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Responsive</title>

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" />


    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            var dataset = {

                "data": [
                  {
                      "first_name": "Airi",
                      "last_name": "Satou",
                      "position": "Accountant",
                      "office": "Tokyo",
                      "start_date": "28th Nov 08",
                      "salary": "$162,700"
                  },
                  {
                      "first_name": "Angelica",
                      "last_name": "Ramos",
                      "position": "Chief Executive Officer (CEO)",
                      "office": "London",
                      "start_date": "9th Oct 09",
                      "salary": "$1,200,000"
                  },
                  {
                      "first_name": "Ashton",
                      "last_name": "Cox",
                      "position": "Junior Technical Author",
                      "office": "San Francisco",
                      "start_date": "12th Jan 09",
                      "salary": "$86,000"
                  },
                  {
                      "first_name": "Bradley",
                      "last_name": "Greer",
                      "position": "Software Engineer",
                      "office": "London",
                      "start_date": "13th Oct 12",
                      "salary": "$132,000"
                  },
                  {
                      "first_name": "Brenden",
                      "last_name": "Wagner",
                      "position": "Software Engineer",
                      "office": "San Francisco",
                      "start_date": "7th Jun 11",
                      "salary": "$206,850"
                  },
                  {
                      "first_name": "Brielle",
                      "last_name": "Williamson",
                      "position": "Integration Specialist",
                      "office": "New York",
                      "start_date": "2nd Dec 12",
                      "salary": "$372,000"
                  },
                  {
                      "first_name": "Bruno",
                      "last_name": "Nash",
                      "position": "Software Engineer",
                      "office": "London",
                      "start_date": "3rd May 11",
                      "salary": "$163,500"
                  },
                  {
                      "first_name": "Caesar",
                      "last_name": "Vance",
                      "position": "Pre-Sales Support",
                      "office": "New York",
                      "start_date": "12th Dec 11",
                      "salary": "$106,450"
                  },
                  {
                      "first_name": "Cara",
                      "last_name": "Stevens",
                      "position": "Sales Assistant",
                      "office": "New York",
                      "start_date": "6th Dec 11",
                      "salary": "$145,600"
                  },
                  {
                      "first_name": "Cedric",
                      "last_name": "Kelly",
                      "position": "Senior Javascript Developer",
                      "office": "Edinburgh",
                      "start_date": "29th Mar 12",
                      "salary": "$433,060"
                  }
                ]
            }

            $.each(dataset.data, function (i, item) {
                item.age = Math.floor((Math.random() * 70) + 1);
                item.extn = Math.floor((Math.random() * 1000) + 1);
            })


            $('#example').DataTable({
                "paging": false,
                "info": false,
                "filter": false,
                "paging": false,
                retrieve: true,
                "processing": true,
                data: dataset.data,
                columns: [{ "data": "first_name" },
                         { "data": "last_name" },
                         { "data": "position" },
                         { "data": "office" },
                         { "data": "age" },
                         { "data": "start_date" },
                         { "data": "salary" },
                         { "data": "extn" }],
                responsive: {
                    details: {
                        display: $.fn.dataTable.Responsive.display.modal({
                            header: function (row) {
                                var data = row.data();
                                alert(row.data.length)
                                return 'Details for ' + data[0] + ' ' + data[1];
                            }
                        }),
                        renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                            tableClass: 'table'
                        })
                    }
                }
            });
        });
    </script>
</head>
<body>
    <table width="100%" class="table table-striped table-bordered nowrap" id="example" cellspacing="0">
        <thead>
            <tr>
                <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></tbody>
    </table>
</body>
</html>

输出：

您甚至可以将整个代码复制并粘贴到HTML文件中并运行它以查看行为。

我在控制台中没有看到任何错误。我使用IE 11和Chrome进行了测试。

非常感谢任何建议/指示。

编辑：

来自jsbin.com/hehewiz/edit?html,output的快照。（由bazzells创建的链接）

Answer 1

您的代码运行正常，当屏幕变小并且至少隐藏了一列时，会出现（+）图标。

这是因为此选项用于响应性地显示信息。

Answer 2

由于collapsed类已从table移除，因此图标会隐藏在宽屏幕上。 collapsed类正在根据当前窗口宽度进行切换。

DataTables - 模态显示 - 不显示图标

2 个答案: