java - Angular 2 Jquery Datatables.net 服务器端不工作
问题描述
当数据从服务器返回时,它永远不会填充到表中。
“我可以看到 'success' 回调的结果,但表格没有被填充,并且 'Processing...' 也继续显示”
使用 Angular 6、Jquery 数据表和 Spring Rest 控制器
npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables@6.0.0 --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev
html代码
<table id=paymentHistoryTable datatable [dtOptions]="dtOptions class="table table-striped table-bordered" >
<thead>
<tr>
<th width="10%">Account ID</th>
<th width="12%">Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
角代码如下
getPaymentHistoryPagination() {
this.dtOptions = {
pagingType: 'full_numbers',
serverSide: true,
processing: true,
ajax: {
url: this.baseUrl + '/getPaymentHistoryPagination',
type: 'POST',
contentType: 'application/json; charset=UTF-8',
error: function(xhr, error, code) { console.log("error::" +error); },
success: function(result) {console.log(JSON.stringify(result))},
data: function(data) {
return JSON.stringify(data);
}
}, columns: [
{ data: "customerId", title: 'Departure Time'},
{ data: "customerName", title: 'Customer Name'}
]
};
}
Java控制器如下
@RequestMapping(value = "/getPaymentHistoryPagination", method = RequestMethod.POST)
@ResponseBody
public DataTableResponse getPaymentHistoryPagination1(@RequestBody @Valid SearchPropertyParamDTO dto) {
DataTableResponse dataTableResponse = new DataTableResponse();
try {
dataTableResponse.setDraw(1);
dataTableResponse.setRecordsFiltered(1L); //One record for testing
dataTableResponse.setRecordsTotal(1L);
Invoice invoice = new Invoice();
invoice.setCustomerId(111L);
invoice.setCustomerName("Abc");
List invoices = new ArrayList();
invoices.add(invoice);
dataTableResponse.setData(invoices);
} catch (Exception ex) {
//LOG.error("Error in getAllProperty", ex);
}
return dataTableResponse;
}
DataTableResponse 如下:
public class DataTableResponse {
private int draw =1;
private long recordsTotal ;
private long recordsFiltered ;
private List data;
}
预期结果:应呈现表实际结果:获取消息处理获取成功响应 {"draw":1,"recordsTotal":1,"recordsFiltered":1,"data":[{"id":null,"customerId" :111,"customerName":"Abc"}]} 但没有填充数据
解决方案
将 jQuery 和 jQuery 插件安装到您的 Angular 项目中对您的项目非常不利。
看看我的 Angular 表,很抱歉我还没有太多机会记录它,但这里有一个帖子和一个 StackBlitz。
https://www.reddit.com/r/Angular2/comments/b76924/easy_angular_table/
https://stackblitz.com/edit/angular-npn1p1?file=src%2Fapp%2Fapp.component.html
推荐阅读
- database - 数据库 .mdf 文件大小不变
- .htaccess - 您可以使用 htaccess 过滤/检查 POST 方法/请求吗?
- java - 将一组字符串流式传输到 Map of
- javascript - 使用 jquery 将延迟添加到现有脚本
- html - 通过 XPath 选择多个但不是全部(例如 //*)标签名称?
- javascript - plotBands 隐藏和显示参数在 Highcharts 中不起作用
- html - 在 Reactjs 中渲染嵌套对象
- regex - 如果存在正则表达式,则捕获特定行
- javascript - Webrtc相机和画布问题全屏
- wordpress - 产品未添加到购物车 WooCommerce