How to implement Pagination using JavaScript/jQuery in a list of data which is called using AJAX method in simple HTML, CSS, Bootstrap Project

Here is my HTML Code for it

<body>
    <div class="container-fluid">
        <!-- Alphabet Filter -->
        <div id="letter-container" class="d-flex flex-wrap justify-content-center"></div>
        <!-- Search Bar and Filters  -->
        <form class="d-flex flex-wrap justify-content-center align-items-center">
            <div class="input-group me-3 mx-5" style="flex: 1 1 400px">
                <span class="input-group-text"><i class="fa fa-search"></i></span>
                <input class="form-control" type="text" id="globalSearchInput" placeholder="Search"
                    style="width: 150px" />
                <button class="btn btn-primary" id="searchButton" type="button">
                    <i class="fa fa-arrow-right"></i>
                </button>
            </div>

            <div class="me-3 d-flex align-items-center" style="flex: 1">
                <label class="me-2" for="sortSelect">Sort:</label>
                <select class="form-select" id="sortSelect">
                    <option class="DropdownData" value="firstName" selected>
                        First Name
                    </option>
                    <option class="DropdownData" value="lastName">Last Name</option>
                    <option class="DropdownData" value="department">Department</option>
                </select>
            </div>

            <div class="d-flex align-items-center flex-wrap" style="flex: 1">
                <label class="me-2" title="Filter By Department">Filter By Department:</label>
                <div class="dropdown">
                    <button class="btn btn-link dropdown-toggle" type="button" id="departmentFilterDropdown"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-filter"></i>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="departmentFilterDropdown" id="filterOptions">
                        <li><a class="dropdown-item" href="#" data-department="All">All Departments</a></li>
                        <li><a class="dropdown-item" href="#" data-department="IT">IT</a></li>
                        <li><a class="dropdown-item" href="#" data-department="HR">HR</a></li>
                        <li><a class="dropdown-item" href="#" data-department="Business Development">Business
                                Development</a></li>
                        <li><a class="dropdown-item" href="#" data-department="QA">QA</a></li>
                        <li><a class="dropdown-item" href="#" data-department="Knacktek">Knacktek</a></li>
                    </ul>
                </div>
            </div>

        </form>
    </div>
    <!-- Profile card -->
    <div class="container mt-3">
        <div class="row" id="profileContainer">
            <div class="card text-center mx-auto" style="width: 100%; border: 1px solid black" id="profileCard1">
                <div class="card-body p-0">
                    <h5 class="card-title text-white py-2"
                        style="background-color: rgb(52, 179, 221); margin-bottom: 0">
                        <span id="name1">Demo Data</span>
                    </h5>
                    <p class="card-subtitle mb-2" id="designation1">Demo Data</p>
                    <img src="./assets/avatar.png" class="rounded-circle mb-2 img-fluid" id="profilePhoto1"
                        alt="Profile Photo" style="width: 100px; height: 100px" />
                    <p class="card-text mb-2"><strong>Company:</strong> <span id="company1">Binary
                            Republik</span>
                    </p>
                    <p class="card-text mb-2"><strong>Department:</strong> <span id="department1">Demo Data</span>
                    </p>
                    <p class="card-text mb-2"><strong>Email:</strong> <span id="email1">Demo Data</span></p>
                    <p class="card-text mb-4"><strong>Manager/Reports To:</strong> <span id="reporter1">Demo
                            Data</span></p>
                    <div class="d-flex justify-content-between">
                        <p class="card-text"><strong>Extension:</strong> <span id="extension1">Demo Data</span></p>
                        <p class="card-text"><strong>Location:</strong> <span id="location1">Demo Data</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Paginations  -->
    <div id="pagination-container" class="container mt-2">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <div class="d-flex align-items-center">
                <label for="itemsPerPage" class="me-2">Items per page:</label>
                <select id="itemsPerPage" class="form-select d-inline-block w-auto">
                    <option value="8">8</option>
                    <option value="16">16</option>
                    <option value="20">20</option>
                    <option value="24">24</option>
                    <option value="all">All</option>
                </select>
            </div>
            <ul class="pagination mb-0" id="pagination"></ul>
        </div>
    </div>

</body>

Here is my JS Code for it

$(document).ready(function () {
    const letters = "All,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z".split(",");
    letters.forEach((letter) => {
        $("#letter-container").append(`<div class="letters">${letter}</div>`);
    });
    var jsonData = [];
    let filteredEmployees = [];
    let sortedEmployees = [];
    // var currentPage = 1;
    // var itemsPerPage = $("#itemsPerPage").val() || 8;
    // var pageCount = Math.ceil(filteredEmployees.length / itemsPerPage);


    $.ajax({
        url: "./assets/employeeDirectory.json",
        method: "GET",
        dataType: "json",
        success: function (data) {
            jsonData = data;
            displayEmployeeCards(data);
        },
        error: function () {
            alert("Failed to fetch data.");
        },
    });

    // Filter By Alphabets
    filterByAlphabet();

    // Sort By Dropdown
    sortByDropdown();

    //Filter By departments
    filterByDepartment();

    //Global Search
    applyGlobalSearch();

    function displayEmployeeCards(jsonData) {
        const container = $("#profileContainer");
        container.empty();
        jsonData.forEach((employee) => {
            const businessPhones = employee.businessPhones.join(", ") || "NA";
            var cardHtml = `
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
        <div class="card text-center mx-auto" style="border: 1px solid black; height: 440px">
            <div class="card-body p-0">
                <h5 class="card-title text-white py-2" style="background-color: rgb(52, 179, 221); margin-bottom: 0">
                    <span>${employee.displayName || "NA"}</span>
                </h5>
                <div style="padding: 5px">
                    <p class="card-subtitle mb-2">${employee.jobTitle || "NA"}</p>
                    <img src="./assets/avatar.png" class="rounded-circle mb-3 img-fluid" alt="Profile Photo"
                        style="width: 100px; height: 100px" />
                    <p class="card-text mb-2">Binary Republik</p>
                    <p class="card-text mb-2">${employee.department || "NA"}</p>
                    <p class="card-text mb-2">
                        <strong>Email:</strong> <span>${employee.mail}</span>
                    </p>
                    <p class="card-text mb-4">
                        <strong>Manager/Reports To:</strong>
                        <span>NA</span>
                    </p>
                    <div class="d-flex justify-content-between">
                        <p class="card-text mb-0">
                            <strong>Extension:</strong> <span>${businessPhones}</span>
                        </p>
                        <p class="card-text mb-0">
                            <strong>Location:</strong>
                            <span>${employee.officeLocation || "NA"}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>`;
            container.append(cardHtml);
        });
    }


    function filterByDepartment() {
        $("#filterOptions .dropdown-item").on("click", function () {
            const selectedDepartment = $(this).data("department");
            if (selectedDepartment === "All") {
                departmentFilteredEmployees = sortedEmployees;
            }
            else {
                departmentFilteredEmployees = sortedEmployees.filter(function (employee) {
                    return employee.department === selectedDepartment;
                });
            }
            if (departmentFilteredEmployees.length == 0) {
                $("#profileContainer").html(`<div class="col-12 text-center"> <p class="mt-4">No Data Found</p> </div>`);
            }
            else {
                displayEmployeeCards(departmentFilteredEmployees);
            }
        });
    }

    function sortByDropdown() {
        $("#sortSelect").on("change", function () {
            const selectedFilterDropdown = $(this).val();
            sortedEmployees = filteredEmployees.slice();;

            if (selectedFilterDropdown === "firstName") {
                sortedEmployees.sort();
            }
            else if (selectedFilterDropdown === "lastName") {
                sortedEmployees.sort(function (a, b) {
                    const surnameA = a.surname || "";
                    const surnameB = b.surname || "";
                    return surnameA.localeCompare(surnameB);
                });
            } else if (selectedFilterDropdown === "department") {
                sortedEmployees.sort(function (a, b) {
                    const departmentA = a.department || "";
                    const departmentB = b.department || "";
                    return departmentA.localeCompare(departmentB);
                });
            }
            if (sortedEmployees.length == 0) {
                $("#profileContainer").html(`<div class="col-12 text-center"> <p class="mt-4">No Data Found</p> </div>`);
            }
            else {
                displayEmployeeCards(sortedEmployees);
            }
        });
    }

    function filterByAlphabet() {
        $(".letters").on("click", function () {

            const selectedLetter = this.innerText;
            if (selectedLetter === "All") {
                filteredEmployees = jsonData;
            }
            else {
                filteredEmployees = jsonData.filter(function (employee) {
                    return employee.displayName.startsWith(selectedLetter);
                });
            }
            if (filteredEmployees.length == 0) {
                $("#profileContainer").html(`<div class="col-12 text-center"> <p class="mt-4">No Data Found</p> </div>`);
            }
            else {
                displayEmployeeCards(filteredEmployees);
            }
        });
    }
    function applyGlobalSearch() {
        $("#searchButton").on("click", function () {
            const searchTerm = $("#globalSearchInput").val().toLowerCase();

            const filteredEmployees = jsonData.filter(function (employee) {
                return (
                    (employee.givenName && employee.givenName.toLowerCase().includes(searchTerm)) ||
                    (employee.surname && employee.surname.toLowerCase().includes(searchTerm)) ||
                    (employee.displayName && employee.displayName.toLowerCase().includes(searchTerm)) ||
                    (employee.department && employee.department.toLowerCase().includes(searchTerm)) ||
                    (employee.jobTitle && employee.jobTitle.toLowerCase().includes(searchTerm)) ||
                    (employee.mail && employee.mail.toLowerCase().includes(searchTerm)) ||
                    (employee.businessPhones && employee.businessPhones.filter(phone => phone.toLowerCase().includes(searchTerm)).length > 0) ||
                    (employee.officeLocation && employee.officeLocation.toLowerCase().includes(searchTerm))
                );
            });
            if (filteredEmployees.length === 0) {
                $("#profileContainer").html(`<div class="col-12 text-center"><p class="mt-4">No Data Found</p></div>`);
            } else {
                displayEmployeeCards(filteredEmployees);
            }
        });
    }


});

I tried to implement using the twbsPagination method, which was shown in javatpoint website, but it doesn’t work on my code, maybe some error from my side. also i tried the ChatGPT method but it filters and sorts the entire data other than the already sorted data (if any)