Как создать несколько страниц для нескольких таблиц на одной странице с помощью одной функции, используя knockout JS?

Question

Когда я использую одну функцию разбивки на страницы для отображения нумерации страниц для нескольких таблиц на одной странице с помощью Knockout JS, последняя таблица не отображается. Я не знаю много о нокауте JS. Но я хочу упростить решение для повторного использования функции разбивки на страницы и шаблона разбивки на страницы для каждой таблицы на одной странице. Пожалуйста, помогите, спасибо.

<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>

Answer 1

Закрывающий тег (</div>) отсутствует на элементах div, которые вы связали с шаблоном.

Добавьте их так:

<div data-bind="template: { name : 'paginationTemplate', data: TeamPagination }"></div>

<div data-bind="template: { name : 'paginationTemplate', data: Pagination }"></div>

Тогда все будет работать так, как задумано!