knockout.js - 如何使用knockoutJS为同一页面中的多个表创建多个分页?
问题描述
当我使用单分页功能通过 KnockoutJS 在同一页面中显示多个表的分页时,最后一个表不会呈现。我对 KnockoutJS 了解不多。但我想简化解决方案,为同一页面中的每个表重用分页功能和分页模板。请帮忙,谢谢。
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/html" id="paginationTemplate">
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tbody>
<tr>
<td><span data-bind="text:(holdTransactionFirstRecord() + 1)"></span> - <span data-bind="text:holdTransactionLastRecord"></span> of <span data-bind="text:holdTransactionsList().length"></span></td>
<td style="text-align:right;">
<a href="#" title="FirstPage" data-bind="click: holdTransactionFirstPage" target="_self">First</a>
<a href="#" title="Previous" data-bind="click: holdTransactionPreviousPage" target="_self">Previous</a>
Page <span data-bind="text:(holdTransactionCurrentPage() + 1)"></span>
<a href="#" title="Next" data-bind="click: holdTransactionNextPage" target="_self">Next</a>
<a href="#" title="LastPage" data-bind="click: holdTransactionLastPage" target="_self">Last</a>
</td>
</tr>
</tbody>
</table>
</script>
<table class="customtable" id="tblTeam">
<thead>
<tr>
<th><span class="separator">Team Id</span></th>
<th><span>Status</span></th>
</tr>
</thead>
<tbody data-bind="foreach:TeamPagination().holdTransactionPaginationData">
<tr>
<td><span data-bind="text:$data.teamId"></span></td>
<td><span data-bind="text:$data.status"></span></td>
</tr>
</tbody>
</table>
<div data-bind="template: { name : 'paginationTemplate', data: TeamPagination }">
<table class="customtable" id="tblHoldTransactions">
<thead>
<tr>
<th><span class="separator">Hold Date</span></th>
</tr>
</thead>
<tbody data-bind="foreach:Pagination().holdTransactionPaginationData">
<tr>
<td><span data-bind="text:$data.HoldStartDate"></span></td>
</tr>
</tbody>
</table>
<div data-bind="template: { name : 'paginationTemplate', data: Pagination }">
<script>
function MainViewModel() {
var self = this;
self.ListOfStuff = ko.observableArray();
self.ListOfTeam = ko.observableArray();
self.TeamPagination = ko.observable(new PaginationVM(self.ListOfTeam));
self.Pagination = ko.observable(new PaginationVM(self.ListOfStuff));
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfStuff.push({HoldStartDate: "1/4/2020"});
self.ListOfTeam.push({teamId:"1",status:"pending"});
self.ListOfTeam.push({teamId:"2",status:"member"});
self.ListOfTeam.push({teamId:"3",status:"member"});
}
function PaginationVM(inputArrObj) {
var self = this;
self.holdTransactionPageSize = ko.observable(2);
self.holdTransactionCurrentPage = ko.observable(0);
self.holdTransactionsList = inputArrObj;
self.holdTransactionPaginationData = ko.observable();
self.holdTransactionFirstRecord = ko.observable();
self.holdTransactionLastRecord = ko.observable();
// The computed declaration for the number of display of records
self.holdTransactionpage = ko.computed(function () {
debugger;
//Logic for displaying number of rows in the table
var pgsize = parseInt(self.holdTransactionPageSize(), 10),
fisrt = pgsize * self.holdTransactionCurrentPage(),
last = fisrt + pgsize;
if(last > self.holdTransactionsList().length)
last = self.holdTransactionsList().length;
self.holdTransactionPaginationData(this.holdTransactionsList.slice(fisrt, last));
self.holdTransactionFirstRecord(fisrt);
self.holdTransactionLastRecord(last);
}, self);
//The function for the total number of pages
self.holdTransactionallpages = function () {
var totpages = self.holdTransactionsList().length / self.holdTransactionPageSize() || 1;
return Math.ceil(totpages);
}
//The function for Next Page
self.holdTransactionNextPage = function () {
if (self.holdTransactionCurrentPage() < self.holdTransactionallpages() - 1) {
self.holdTransactionCurrentPage(self.holdTransactionCurrentPage() + 1);
}
}
//The function for Previous Page
self.holdTransactionPreviousPage = function () {
if (self.holdTransactionCurrentPage() > 0) {
self.holdTransactionCurrentPage(self.holdTransactionCurrentPage() - 1);
}
}
self.holdTransactionFirstPage = function () {
if(self.holdTransactionCurrentPage() > 0)
self.holdTransactionCurrentPage(0);
}
self.holdTransactionLastPage = function () {
if(self.accActivityCurrentPage() < self.holdTransactionallpages())
self.accActivityCurrentPage(self.holdTransactionallpages() -1);
}
}
var model = new MainViewModel();
ko.applyBindings(model);
</script>
解决方案
</div>
与模板绑定的 div 上缺少结束标记 ( )。
像这样添加它们:
<div data-bind="template: { name : 'paginationTemplate', data: TeamPagination }"></div>
<div data-bind="template: { name : 'paginationTemplate', data: Pagination }"></div>
然后它按预期工作!
推荐阅读
- c# - 将命令行参数传递给 Visual Studio 容器工具中 .NET Core 控制台应用程序的 Docker 调试运行
- python - 如何使用熊猫为excel中的特定行添加背景颜色
- javascript - 即使函数为真,表单也不提交
- asp.net - 在 .net 框架中本地开发时如何使用 Key Vault?
- chef-infra - 如何在厨师角色文件中添加特定版本
- python-3.x - 通过扩展右数据框的单元格内容省略左连接中的重复项
- javascript - putImageData 无法缩放/适合画布中的视频/图像(HTML5、CSS、JS)
- javascript - 如何覆盖代理在控制台中的显示方式?
- wordpress - 将excel文件导入wordpress数据库
- excel - 如何摆脱运行时错误 91 对象变量或未设置块变量?