Fix: player list navigator with pagination
This commit is contained in:
@@ -6,7 +6,7 @@ let typingAppList;
|
||||
|
||||
let accountValidator = new AccountValidator();
|
||||
|
||||
|
||||
/*
|
||||
function onClickPageNo(item, pageNo) {
|
||||
let tagDiv = $(item).closest("div");
|
||||
// console.log(tagDiv);
|
||||
@@ -18,3 +18,4 @@ function onClickPageNo(item, pageNo) {
|
||||
else if(tagDivIDName === "search_player_list_navigator")
|
||||
searchPlayerListManager.onClickPageNo(pageNo);
|
||||
}
|
||||
*/
|
||||
@@ -52,14 +52,18 @@ class PlayerList {
|
||||
disableItem(item) {
|
||||
$(item.playerID).empty();
|
||||
$(item.playerName).prop("disabled", true);
|
||||
// $(item.playerName).removeClass("bg-secondary");
|
||||
$(item.enterCode).prop("disabled", true);
|
||||
// $(item.enterCode).removeClass("bg-secondary");
|
||||
$(item.editButton).prop("disabled", true);
|
||||
$(item.deleteButton).prop("disabled", true);
|
||||
}
|
||||
|
||||
enableItem(item) {
|
||||
$(item.playerName).prop("disabled", false);
|
||||
// $(item.playerName).addClass("bg-secondary");
|
||||
$(item.enterCode).prop("disabled", false);
|
||||
// $(item.enterCode).addClass("bg-secondary");
|
||||
$(item.editButton).prop("disabled", false);
|
||||
$(item.deleteButton).prop("disabled", false);
|
||||
}
|
||||
|
||||
@@ -8,7 +8,8 @@
|
||||
|
||||
this.list = new PlayerList(this.docList, this);
|
||||
this.list.updatePlayerList(null);
|
||||
this.listNavigator = new PlayerListNavigator(this, this.list, this.docNav);
|
||||
// this.listNavigator = new PlayerListNavigator(this, this.list, this.docNav);
|
||||
this.listNavigator = new PlayerListNavigator(this.docNav, this);
|
||||
|
||||
this.playerCount = 0;
|
||||
this.activePageNo = 1;
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
class PlayerListNavigator {
|
||||
|
||||
constructor(playerListManager, playerList, pageNoArea) {
|
||||
constructor(pageNoArea, playerListManager) {
|
||||
let self = this;
|
||||
this.playerListManager = playerListManager;
|
||||
this.playerList = playerList;
|
||||
this.pageNoArea = pageNoArea;
|
||||
this.pagination = pageNoArea;
|
||||
// console.log(parent);
|
||||
|
||||
this.activePageNo = 1;
|
||||
@@ -12,61 +11,110 @@
|
||||
}
|
||||
|
||||
updateNavigator(activePageNo, lastPageNo) {
|
||||
let self = this;
|
||||
|
||||
this.activePageNo = activePageNo;
|
||||
this.lastPageNo = lastPageNo;
|
||||
// this.lastPageNo = Math.ceil( (playerCount + 1) / 10 );
|
||||
|
||||
$(this.pageNoArea).empty();
|
||||
$(this.pagination).empty();
|
||||
|
||||
let paginationLeftArrows = '\
|
||||
<li class="page-item">\
|
||||
<a class="page-link" href="javascript:void(0);" aria-label="First">\
|
||||
<span aria-hidden="true">«</span>\
|
||||
<span class="sr-only">First</span>\
|
||||
</a>\
|
||||
</li>\
|
||||
\
|
||||
<li class="page-item">\
|
||||
<a class="page-link" href="javascript:void(0);" aria-label="Previous">\
|
||||
<span aria-hidden="true"><</span>\
|
||||
<span class="sr-only">Previous</span>\
|
||||
</a>\
|
||||
</li>\
|
||||
\
|
||||
<li> </li>\
|
||||
\ ';
|
||||
|
||||
$(this.pagination).append(paginationLeftArrows);
|
||||
|
||||
for(let pageNo = 1; pageNo < this.lastPageNo + 1; pageNo++) {
|
||||
$(this.pageNoArea).append(
|
||||
"<a onClick='onClickPageNo(this, " + pageNo + ")'> " + pageNo + " </a>"
|
||||
$(this.pagination).append(
|
||||
// "<a onClick='onClickPageNo(this, " + pageNo + ")'> " + pageNo + " </a>"
|
||||
'<li class="page-item"><a class="page-link" href="javascript:void(0);" aria-label="' + pageNo + '">' + pageNo + '</a></li>'
|
||||
);
|
||||
/*
|
||||
let aTag = $(this.pageNoArea).append(
|
||||
"<a> " + pageNo + " </a>"
|
||||
);
|
||||
aTag.click(
|
||||
this.onClickPageNo(pageNo)
|
||||
);
|
||||
*/
|
||||
}
|
||||
|
||||
let paginationRightArrows = '\
|
||||
<li> </li>\
|
||||
\
|
||||
<li class="page-item">\
|
||||
<a class="page-link" href="javascript:void(0);" aria-label="Next">\
|
||||
<span aria-hidden="true">></span>\
|
||||
<span class="sr-only">Next</span>\
|
||||
</a>\
|
||||
</li>\
|
||||
\
|
||||
<li class="page-item">\
|
||||
<a class="page-link" href="javascript:void(0);" aria-label="Last">\
|
||||
<span aria-hidden="true">»</span>\
|
||||
<span class="sr-only">Last</span>\
|
||||
</a>\
|
||||
</li>\
|
||||
';
|
||||
$(this.pagination).append(paginationRightArrows);
|
||||
|
||||
|
||||
$("[aria-label='First']").click(function() {
|
||||
self.onClickPageNo("first");
|
||||
});
|
||||
|
||||
$("[aria-label='Previous']").click(function() {
|
||||
self.onClickPageNo("previous");
|
||||
});
|
||||
|
||||
for(let pageNo = 1; pageNo < this.lastPageNo + 1; pageNo++) {
|
||||
$("[aria-label='" + pageNo + "']").click(function() {
|
||||
self.onClickPageNo(pageNo);
|
||||
});
|
||||
}
|
||||
|
||||
$("[aria-label='Next']").click(function() {
|
||||
self.onClickPageNo("next");
|
||||
});
|
||||
|
||||
$("[aria-label='Last']").click(function() {
|
||||
self.onClickPageNo("last");
|
||||
});
|
||||
}
|
||||
|
||||
onClickPageNo(pageNo) {
|
||||
console.log(pageNo);
|
||||
switch(pageNo) {
|
||||
case "first":
|
||||
this.activePageNo = 1;
|
||||
// this.playerList.loadPlayerListPage(this.activePageNo);
|
||||
this.playerListManager.onClickPageNo(this.activePageNo);
|
||||
return;
|
||||
break;
|
||||
|
||||
case "prev":
|
||||
case "previous":
|
||||
if(this.activePageNo > 1)
|
||||
this.activePageNo -= 1;
|
||||
// this.playerList.loadPlayerListPage(this.activePageNo);
|
||||
this.playerListManager.onClickPageNo(this.activePageNo);
|
||||
return;
|
||||
break;
|
||||
|
||||
case "next":
|
||||
if(this.activePageNo < this.lastPageNo)
|
||||
this.activePageNo += 1;
|
||||
// this.playerList.loadPlayerListPage(this.activePageNo);
|
||||
this.playerListManager.onClickPageNo(this.activePageNo);
|
||||
return;
|
||||
break;
|
||||
|
||||
case "last":
|
||||
// this.playerList.loadPlayerListPage(this.lastPageNo);
|
||||
this.activePageNo = this.lastPageNo;
|
||||
this.playerListManager.onClickPageNo(this.activePageNo);
|
||||
return;
|
||||
break;
|
||||
|
||||
default:
|
||||
this.activePageNo = pageNo;
|
||||
}
|
||||
|
||||
this.activePageNo = pageNo;
|
||||
// this.playerList.loadPlayerListPage(this.activePageNo);
|
||||
console.log(this.activePageNo);
|
||||
this.playerListManager.onClickPageNo(this.activePageNo);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user