使用 Ajax 数据实现 Datatables 响应式详细信息显示

Question

我想实现 Datatable 的 responsive details with Bootstrap modal，但它对我不起作用。我注意到的第一件事是 "plus-sign" 没有出现在我的 table 的第一列中。我不确定这是因为我正在使用 ajax 数据并需要示例未显示的其他参数，还是因为我添加了一个自动编号作为我的第一列。

这里是 table HTML:

<table id="users" class="table table-striped table-bordered nowrap" data-conf="@Model.ExtraVM.DialogMsg" data-title="@Model.ExtraVM.DialogTitle" data-btnok="@Model.ExtraVM.Button1" data-btncancel="@Model.ExtraVM.Button2">
                    <thead>
                        <tr>
                            <th>@Model.HeadingVM.Col1</th>
                            <th>@Model.HeadingVM.Col2</th>
                            <th>@Model.HeadingVM.Col3</th>
                            <th>@Model.HeadingVM.Col4</th>
                            <th>@Model.HeadingVM.Col5</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

这里是 jquery 代码：

<script>
        $(document).ready(function () {
            var t = $("#users").DataTable({
                responsive: {
                    details: {
                        display: $.fn.dataTable.Responsive.display.modal({
                            header: function (row) {
                                var data = row.data();
                                return 'Details for ' + data[0] + ' ' + data[1];
                            }
                        }),
                        renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                            tableClass: 'table'
                        })
                    }
                },
                columnDefs: [{
                    "searchable": false,
                    "orderable": false,
                    "targets": 0
                }],
                order: [[1, 'asc']],
                ajax: {
                    url: "/api/users",
                    dataSrc: ""
                },
                columns: [
                    {
                        data: "id"
                    },
                    {
                        data: "firstName"
                    },
                    {
                        data: "lastName"
                    },
                    {
                        data: "userName"
                    },
                    {
                        data: "id",
                        render: function (data) {
                            return "<a href='#'><i class='fa fa-eye' data-id='" + data + "' data-toggle='modal' data-target='#dataPopup'></i></a> | <a href='#'><i class='fa fa-pencil js-edit' data-id='" + data + "'></i></a> | <a href='#'><i class='fa fa-trash js-delete' data-id='" + data + "'></i></a>";
                        }
                    }
                ]
            });

            t.on('order.dt search.dt', function () {
                t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();

            $("#users").on("click", ".js-delete", function () {
                var btn = $(this);
                var confirm = btn.parents("table").attr("data-conf");
                var dialogTitle = btn.parents("table").attr("data-title");
                var btnOK = btn.parents("table").attr("data-btnOk");
                var btnCancel = btn.parents("table").attr("data-btnCancel");

                bootbox.dialog({
                    message: confirm,
                    title: dialogTitle,
                    buttons: {
                        main: {
                            label: btnCancel,
                            className: "btn-default",
                            callback: function () {
                                var result = "false";
                            }
                        },
                        success: {
                            label: btnOK,
                            className: "btn-primary",
                            callback: function () {
                                $.ajax({
                                    url: "/api/users/" + btn.attr("data-id"),
                                    method: "DELETE",
                                    success: function () {
                                        btn.parents("tr").remove();
                                    }
                                });
                            }
                        }
                    }
                });
            });
        });



    </script>
}

这是我的 table 的外观（如您所见，缺少加号）：

Answer 1

您的代码似乎没问题。只有当查看区域足够小并且其中一列被隐藏时，才会出现加号。

没有强制显示 (+) 符号的设置，但您可以使用带有额外空列和 class none 的技巧，这将强制始终隐藏列.有关详细信息，请参阅 Class logic。

有关代码和演示，请参阅 this jsFiddle。

使用 Ajax 数据实现 Datatables 响应式详细信息显示

Implement Datatables responsive details display with Ajax data

datatables

bootstrap-modal

responsive