Angular 6集成jQuery DataTables服务端渲染数据无法加载问题

我帮你排查了一下，你遇到的表格一直显示Processing...且不渲染数据的问题，主要有几个关键原因，咱们一个个来解决：

1. 后端Draw参数硬编码，不匹配前端请求值 #

DataTables的服务端模式要求后端返回的draw参数必须和前端请求的draw参数完全一致，它用来做请求响应的匹配校验。你现在后端直接写死了dataTableResponse.setDraw(1);，但前端每次发起请求的draw值是递增的（比如第一次是1，第二次是2，以此类推），不匹配的话DataTables会直接忽略这个响应，自然不会渲染数据。

修改后端Controller代码：
把硬编码的draw值改成从前端传入的dto里获取（需要确保你的SearchPropertyParamDTO已经包含draw字段）：

// 替换原来的setDraw(1)
dataTableResponse.setDraw(dto.getDraw());

2. 自定义success回调覆盖了DataTables默认处理逻辑 #

你在Angular的dtOptions.ajax里加了自定义的success回调，这会覆盖angular-datatables封装的默认响应处理流程。DataTables原本会自动解析success返回的数据来渲染表格，你自己加了success回调后，这个默认流程就被打断了，所以即使拿到了正确数据，表格也不知道该怎么处理。

修改Angular代码：
删掉ajax配置里的success回调：

ajax: {
 url: this.baseUrl + '/getPaymentHistoryPagination',
 type: 'POST',
 contentType: 'application/json; charset=UTF-8',
 error: function(xhr, error, code) { console.log("error::" +error); },
 // 移除自定义success回调
 data: function(data) { return JSON.stringify(data); }
},

如果需要查看响应数据，可以在后端日志输出，或者使用angular-datatables提供的回调钩子，不要用自定义的success回调。

3. 可选优化：Columns配置与HTML表头统一 #

你前端HTML里的表头是Account ID和Name，但dtOptions里的columns title写的是Departure Time和Customer Name，虽然不影响功能，但为了避免混淆，建议统一：

columns: [
 { data: "customerId", title: 'Account ID'},
 { data: "customerName", title: 'Name'}
]

4. 可选规范：DataTableResponse实体类泛型指定 #

你的DataTableResponse里的data字段是List，最好指定泛型为List<Invoice>，这样类型更安全，也避免潜在的序列化问题：

private List<Invoice> data;

做完以上修改后，重新运行项目，应该就能看到表格正常渲染数据了。

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