jQuery DataTables：点击列名后数据可见答案

【问题标题】：jOuery DataTables: data is visible after click on column namejQuery DataTables：点击列名后数据可见
【发布时间】：2020-02-28 13:11:16
【问题描述】：

我有一个关于datatables的问题：

我从我的 REST API 接收数据。页面加载后，我有一个空表，单击其中一个列名或显示（带有数字的组合框）条目后会显示我的数据。

您知道为什么表格只在单击一个可用按钮后才显示数据吗？如果我使用删除按钮从表格中删除最后一列 - 表格显示数据而不在页面加载后单击列名，那么最后一列定义可能有问题

这是我的 js：

    $(document).ready(function () {
        $.ajax({
            url: 'http://localhost:8080/user/',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                bindtoDatatable(data);
            }
        });

    });

    function bindtoDatatable(data) {
        var table = $('#table').dataTable({
            data: data,
            columns: [{
                data: "id"
            }, {
                data: "firstname"
            }, {
                data: "lastname"
            }, {
                data: "email"
            }, {
                data: null,
                className: "center",
                defaultContent: '<a href="" class="deleteUser">Delete</a>'
            }]
        })
    }

    //Delete a record
    $('.deleteUser').on('click', 'a.deleteUser', function (e) {
        e.preventDefault();

        table.remove( $(this).closest('tr'), {
            title: 'Delete record',
            message: 'Are you sure you wish to remove this record?',
            buttons: 'Delete'
        } );
    }
    );

和html：


    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../../js/bootstrap.min.css">
        <link rel="stylesheet" href="../../../css/main.css">
        <script src="../../../js/jquery-3.4.1.min.js"></script>
        <script src="../../../js/bootstrap.min.js"></script>
        <script src="../../../js/admin/users2.js"></script>
        <script type="text/javascript" charset="utf8"
                src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
        <title>Admin: users page</title>
    </head>
    <body>
    <div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Administration
                    </a>
                </li>
                <li>
                    <a href="/admin/users">Users</a>
                </li>
                <li>
                    <a href="../index">Log out</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <table id="table" class="display">
                <thead>
                <tr>
                    <th>id</th>
                    <th>firstname</th>
                    <th>lastname</th>
                    <th>email</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    </body>
    </html>

【问题讨论】：

使用ajax 选项填充您的数据表。使用名为 jQuery .ajax() 的 externally 填充表格会导致不同类型的问题 - 请参阅我的 posts 之一中的详细信息以及示例（顺便说一句，如果该答案有助于为您解决问题，请投票非常受欢迎;)

标签： datatables javascript jquery html datatables

【解决方案1】：

好的，我错过了我的 html 中的一列操作按钮向表格添加操作后 - 一切正常

【讨论】：