pagination and pagesize implementation
This commit is contained in:
parent
97b3d67301
commit
1fb8ca3da1
@ -4,7 +4,7 @@ var subTable = null;
|
||||
function initSubscriptionTable() {
|
||||
subTable = $("#subTable").DataTable({
|
||||
info: false,
|
||||
paging: true,
|
||||
paging: false,
|
||||
searching: false,
|
||||
autoWidth: false,
|
||||
order: [],
|
||||
@ -247,21 +247,24 @@ function clearExistingSubRows() {
|
||||
subTable.clear().draw(false);
|
||||
}
|
||||
|
||||
async function loadSubscriptions(guildId, page=1, pageSize=10) {
|
||||
async function loadSubscriptions(guildId, page=1, pageSize=null) {
|
||||
|
||||
if (!guildId)
|
||||
return;
|
||||
|
||||
const pageInfo = subTable.page();
|
||||
alert(pageInfo);
|
||||
alert(JSON.stringify(pageInfo, null, 4));
|
||||
if (!pageSize)
|
||||
pageSize = $("#subTablePageSize").val();
|
||||
|
||||
// const pageInfo = subTable.page();
|
||||
// console.debug(JSON.stringify(pageInfo, null, 4));
|
||||
|
||||
$("#deleteSelectedSubscriptionsBtn").prop("disabled", true);
|
||||
clearExistingSubRows();
|
||||
|
||||
try {
|
||||
const subscriptions = await getSubscriptions(guildId, (pageInfo.page + 1) | 1, pageInfo.pages | 10);
|
||||
const subscriptions = await getSubscriptions(guildId, page, pageSize);
|
||||
subTable.rows.add(subscriptions.results).draw(false);
|
||||
handleSubPagination(page, pageSize, subscriptions.count, subscriptions.next, subscriptions.previous);
|
||||
$("#subTable thead .table-select-all").prop("disabled", subscriptions.results.length === 0);
|
||||
console.debug("loading subs, " + subscriptions.results.length + " found");
|
||||
}
|
||||
@ -271,6 +274,64 @@ async function loadSubscriptions(guildId, page=1, pageSize=10) {
|
||||
}
|
||||
}
|
||||
|
||||
$("#subTablePageSize").on("change", async function() {
|
||||
const page = 1; // reset to page 1 to ensure the page exists.
|
||||
const pageSize = $(this).val();
|
||||
|
||||
loadSubscriptions(getCurrentlyActiveServer().guild_id, page, pageSize);
|
||||
});
|
||||
|
||||
// Update the UI pagination options according to the passed data.
|
||||
function handleSubPagination(currentPage, pageSize, totalItems, nextExists, prevExists) {
|
||||
|
||||
$("#subPagination").attr("data-page", currentPage);
|
||||
|
||||
// Remove existing page-specific buttons
|
||||
$("#subPagination .page-pick").remove();
|
||||
|
||||
// Determine states of 'previous page' and 'next page' buttons
|
||||
$("#subPagination .page-prev").toggleClass("disabled", !prevExists).attr("tabindex", prevExists ? "" : "-1");
|
||||
$("#subPagination .page-next").toggleClass("disabled", !nextExists).attr("tabindex", nextExists ? "" : "-1");
|
||||
|
||||
// Calculate amount of pages to account for
|
||||
const pages = Math.max(Math.ceil(totalItems / pageSize), 1);
|
||||
|
||||
// Create a button for each page
|
||||
for (let i = 1; i < pages + 1; i++) {
|
||||
let pageItem = $("<li>").addClass("page-item");
|
||||
let pageLink = $("<button>")
|
||||
.attr("type", "button")
|
||||
.attr("data-page", i)
|
||||
.addClass("page-link page-pick")
|
||||
.text(i)
|
||||
|
||||
pageItem.append(pageLink);
|
||||
|
||||
// Insert the new page button before the 'next page' button
|
||||
$("#subPagination .pagination .page-next").parent().before(pageItem);
|
||||
}
|
||||
|
||||
// Disable the button for the current page
|
||||
$(`#subPagination .pagination .page-pick[data-page="${currentPage}"]`).addClass("disabled").attr("tabindex", -1);
|
||||
}
|
||||
|
||||
$("#subPagination .pagination").on("click", ".page-link", async function() {
|
||||
|
||||
let wantedPage;
|
||||
let currentPage = parseInt($("#subPagination").attr("data-page"));
|
||||
|
||||
if ($(this).hasClass("page-prev"))
|
||||
wantedPage = currentPage - 1
|
||||
else if ($(this).hasClass("page-next"))
|
||||
wantedPage = currentPage + 1;
|
||||
else
|
||||
wantedPage = $(this).attr("data-page");
|
||||
|
||||
console.debug("moving to page: " + wantedPage);
|
||||
|
||||
await loadSubscriptions(getCurrentlyActiveServer().guild_id, wantedPage)
|
||||
});
|
||||
|
||||
$(document).on("selectedServerChange", async function() {
|
||||
|
||||
// Hide alerts
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex-grow-1 container-fluid bg-body" style="min-width: 0;">
|
||||
<div class="flex-grow-1 container-fluid bg-body overflow-y-auto" style="min-width: 0;">
|
||||
<div id="noSelectedServer">
|
||||
select a server
|
||||
</div>
|
||||
@ -86,9 +86,36 @@
|
||||
<div class="col-12">
|
||||
<div id="serverTabContent" class="tab-content">
|
||||
<div id="subscriptionsTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="subscriptionsTab" tabindex="0">
|
||||
<div class="table-responsive mt-3">
|
||||
<div class="table-responsive my-3">
|
||||
<table id="subTable" class="table table-hover align-middle"></table>
|
||||
</div>
|
||||
<div class="table-controls d-flex mb-3">
|
||||
<nav id="subPagination">
|
||||
<ul class="pagination mb-0">
|
||||
<li class="page-item">
|
||||
<button type="button" class="page-link page-prev rounded-start-1">Previous</button>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<button type="button" class="page-link page-next rounded-end-1">Next</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="d-flex ms-auto">
|
||||
<label for="subTablePageSize" class="form-label align-self-center mb-0 me-2">Per Page</label>
|
||||
<select name="subTablePageSize" id="subTablePageSize" class="select-2">
|
||||
<option value="10" selected>10 </option>
|
||||
<option value="25">25 </option>
|
||||
<option value="50">50 </option>
|
||||
<option value="100">100 </option>
|
||||
</select>
|
||||
<!-- <div class="mb-4">
|
||||
<label for="subChannels" class="form-label">Channels</label>
|
||||
<select name="subChannels" id="subChannels" class="select-2" multiple data-dropdownparent="#subFormModal"></select>
|
||||
<div class="form-text">Subscription content will be sent to these channels.</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="filtersTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="filtersTab" tabindex="0">
|
||||
<div class="table-responsive mt-3">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user