jQuery DataTables问题：页面加载后数据需点击列名才显示

嘿，我帮你找出了几个导致这个问题的关键原因，咱们一步步来修复：

1. 表头列数和配置的列数不匹配 #

你的HTML <thead> 里只写了4个<th>，但在DataTables的columns配置里定义了5列（包含最后一列的删除按钮）。DataTables对列数的一致性要求很严格，这种不匹配会让表格初始化时渲染异常，只有触发重绘操作（比如点击列名排序、调整显示条目数）后，才会正确加载数据。

2. 删除按钮的事件绑定有问题 #

• 你写的$('.deleteUser').on('click', 'a.deleteUser'...是错误的事件委托写法，因为.deleteUser本身是动态生成的元素，应该绑定到静态的父元素（比如表格#table）来监听动态元素的点击事件。
• 另外，table变量是bindtoDatatable函数的局部变量，外部的点击事件根本访问不到它，会直接报错，导致删除功能失效。

3. 初始化配置的小细节 #

建议给DataTables加上destroy: true配置，避免重复初始化可能带来的问题；还有删除按钮的HTML不用转义成<，在JS字符串里直接用双引号包裹正常标签就行。

修改后的完整代码 #

JavaScript代码： #

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

// 把表格实例变量提升到全局，方便事件里访问
let dtTable;

function bindtoDatatable(data) {
  dtTable = $('#table').DataTable({
    destroy: true, // 允许重新初始化表格
    data: data,
    columns: [
      { data: "id" }, 
      { data: "firstname" }, 
      { data: "lastname" }, 
      { data: "email" }, 
      { 
        data: null, 
        className: "center", 
        defaultContent: '<a href="#" class="deleteUser">Delete</a>' 
      }
    ]
  });
}

// 用事件委托绑定删除按钮的点击事件，监听静态父元素#table
$('#table').on('click', 'a.deleteUser', function (e) {
  e.preventDefault();
  // 用原生confirm做确认弹窗，也可以用DataTables的扩展组件
  if (confirm('Are you sure you wish to remove this record?')) {
    // 找到当前行并删除，然后重新绘制表格
    dtTable.row($(this).closest('tr')).remove().draw();
  }
});

HTML代码（重点修改表头部分）： #

<html lang="en">
<head>
<link rel="stylesheet" href="../../../js/bootstrap.min.css">
<link rel="stylesheet" href="../../../css/main.css">
<!-- 注意加载顺序：先jQuery，再DataTables，最后你的自定义JS -->
<script src="../../../js/jquery-3.4.1.min.js"></script>
<script src="../../../js/bootstrap.min.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">
<script src="../../../js/admin/users2.js"></script>
<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>
<th>Action</th> <!-- 新增这一列，和columns配置的数量对应 -->
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!-- /#page-content-wrapper -->
</div>
</body>
</html>

另外提醒一下：我调整了JS文件的加载顺序，必须先加载jQuery和DataTables，再加载你的自定义JS，不然会因为找不到DataTables的API而报错。

内容的提问来源于stack exchange，提问作者mtmx