';
},
item: function(data, escape) {
return '
' + data.text + '
';
}
}
});
// Initialize Tom Select for Items Per Page
var itemsPerPageDropdown = new TomSelect('#itemsPerPageDropdown', {
create: false, // Disable the ability to create new options
maxItems: 1, // Only one item can be selected
placeholder: 'Items per page',
plugins: ['dropdown_input'], // Disable typing
allowEmptyOption: true, // Allow the placeholder to be selected
controlInput: false, // Disable the input field
});
// Function to create pagination buttons
function createPagination() {
const paginationContainer = document.querySelector('.pagination');
paginationContainer.innerHTML = ''; // Clear existing pagination
const totalPages = Math.ceil(recipeList.size() / itemsPerPage);
const currentPage = Math.ceil(recipeList.i / itemsPerPage) + 1;
const innerWindow = 3;
const outerWindow = 3;
// Previous Button
if (currentPage > 1) {
const prevButton = document.createElement('button');
prevButton.className = 'page prev';
prevButton.innerHTML = '
';
prevButton.addEventListener('click', function() {
recipeList.show((currentPage - 2) * itemsPerPage, itemsPerPage);
createPagination(); // Update pagination after navigating
});
paginationContainer.appendChild(prevButton);
}
// Calculate page range
let startPage = Math.max(1, currentPage - innerWindow);
let endPage = Math.min(totalPages, currentPage + innerWindow);
if (startPage > 1) {
// Show the first page and an ellipsis if there's a gap
addPageButton(paginationContainer, 1, currentPage);
if (startPage > 2) {
addEllipsis(paginationContainer);
}
}
for (let i = startPage; i <= endPage; i++) {
addPageButton(paginationContainer, i, currentPage);
}
if (endPage < totalPages) {
// Show an ellipsis and the last page if there's a gap
if (endPage < totalPages - 1) {
addEllipsis(paginationContainer);
}
addPageButton(paginationContainer, totalPages, currentPage);
}
// Next Button
if (currentPage < totalPages) {
const nextButton = document.createElement('button');
nextButton.className = 'page next';
nextButton.innerHTML = '
';
nextButton.addEventListener('click', function() {
recipeList.show(currentPage * itemsPerPage, itemsPerPage);
createPagination(); // Update pagination after navigating
});
paginationContainer.appendChild(nextButton);
}
}
// Function to add a page button
function addPageButton(container, page, currentPage) {
const button = document.createElement('button');
button.className = 'page';
button.innerHTML = page;
if (page === currentPage) {
button.classList.add('active');
}
button.addEventListener('click', function() {
recipeList.show((page - 1) * itemsPerPage, itemsPerPage);
createPagination(); // Update pagination after navigating
});
container.appendChild(button);
}
// Function to add an ellipsis
function addEllipsis(container) {
const ellipsis = document.createElement('span');
ellipsis.className = 'ellipsis';
ellipsis.innerHTML = '
';
container.appendChild(ellipsis);
}
// Initial pagination setup
createPagination();
// Handle change in number of items per page
itemsPerPageDropdown.on('change', function() {
itemsPerPage = parseInt(this.getValue(), 10);
recipeList.page = itemsPerPage; // Update the List.js page option
recipeList.update();
createPagination(); // Recreate pagination with the new items per page
});
// Recreate pagination after sorting
sortDropdown.on('change', function() {
var selectedOption = this.getValue().split(':');
var sortField = selectedOption[0];
var sortOrder = selectedOption[1];
if (typeof recipeList.sort === 'function') {
recipeList.sort(sortField, {
order: sortOrder
});
recipeList.update();
createPagination(); // Update pagination after sorting
} else {
console.error('List.js sort function is not available on recipeList.');
}
});
// Update pagination when the list is updated
recipeList.on('updated', function() {
createPagination();
});
});
8 Servings
20 m
