如何解决带有ajax的jQuery数据表,发布API调用挂钩 我的问题是-更新1:
我正在通过服务器端分页实现jquery DataTable。请参考下面的代码段-
脚本$(async function() {
$('#registry_table').DataTable({
serverSide: true,ajax: {
url: 'localhost:3000/provenance/registries',headers: {
'Content-Type': 'application/json','Authorization': 'Bearer ' + localStorage.getItem("token")
},data: () => {
return {page: 0,per_page: 5};
}
},columns: [
{data: 'name',defaultContent: 'N/A'},{data: 'created',{data: 'extrinsic',{data: 'registry',defaultContent: ' <span class="text-primary bg-white fa-border d-inline-block" style="cursor: pointer" title="Rename Registry"><i class="fas fa-pen-nib"/> Rename</span>'}
],language: {
searchPlaceholder: "Search...",search: "",lengthMenu: "_MENU_ items/page"
}
});
});
HTML
<table class="table table-striped mg-b-0" id="registry_table">
<thead>
<tr>
<th class="text-left">#</th>
<th class="text-left">Name</th>
<th class="text-left">Created on</th>
<th class="text-left">Transaction</th>
<th class="text-center">Action</th>
</tr>
</thead>
</table>
API响应
{
"registries": [
{
"registry": 489607958,"created_by": "5DqdTHZLA8X2Lk2FqCPFM9kxd8GmdMbyboFiFg6gmB8sHCg4","name": "test 7","created": "2020-09-14T15:08:49.006766"
},{
"registry": 1421927575,"name": "test 6","created": "2020-09-14T15:08:43.104835"
},{
"registry": 1560576458,"name": "test 4","created": "2020-09-14T15:08:34.132407"
},{
"registry": 1766285412,"name": "test 5","created": "2020-09-14T15:08:27.376323"
},{
"registry": 155398053,"name": "test 3","created": "2020-09-14T15:08:16.768747"
}
],"total": 7
}
如果总行数为 7 并且per_page
= 5 ,则它应显示 2 页。但是在浏览器中,它显示5页。另外,页面信息显示错误信息。
我的问题是-
- 获取数据后是否可以设置页数/总项数
- 页面信息应为
Showing 1 to 5 of 7 entries (filtered from 7 total entries)
,如何正确设置这些信息? - 如何将整行作为参数传递给函数(重命名按钮)
更新1:
脚本(已修改 data ,并在Ajax部分添加了 dataSrcdata: (d) => {
d.page =self.page;
d.per_page =self.per_page;
delete d.columns;
delete d.order;
delete d.search;
delete d.start;
delete d.length;
},dataSrc: (response) => {
response.draw = 1;
response.recordsTotal = response.total;
response.recordsFiltered = response.registries.length;
response.data = response.registries;
return response.data;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。