html table add pagination

Question

I want to add page number to my table. But the problem is - when the page is loaded the page number is not working. Working when clicking on page number symbol. 
If I use the data manually instead of fetching it from the database, it works.
I would appreciate it if someone could help. thanks in advance

//style.css Code
.table-responsive {
    width: 100vw;
    margin-top: 3rem;
    height: 100vh;
}
    .table-responsive table {
        width: 100%;
        border-collapse: collapse;
        font-family: Georgia, 'Times New Roman', Times, serif;
        padding: 0.5vw;
    }
#myInput {
    padding: .5vw;
    border-radius: .4vw;
    margin-bottom: 1.5vw;
}
.table-responsive table th {
    padding: 0.5vw;
    border-bottom: 1px solid #ddd;
    outline-color: #dddddd7a;
    padding-left: 1vw;
    padding-right: 1vw;
    text-align: center;
    background-color: #3A3335;
    color: white;
    cursor: pointer;
    position: sticky;
    top: 0;
    font-size: 10px;
}
.table-responsive table td {
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    border: 1px solid black;
    text-align: left;
    font-size: 10px;
}
/*table-responsive table th:first-child {
            border-top-left-radius: 10px;
        }
        .table-responsive table th:last-child {
            border-top-right-radius: 10px;
        }*/
.table-responsive table tr:nth-child(even) {
    background-color: #DBD4D3;
}
.table-responsive table tr:nth-child(odd) {
    background-color: whitesmoke;
}
.table-responsive table img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
#pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: whitesmoke;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 14px;
}
    #pagination a {
        color: black;
        float: left;
        padding: 9px 9px;
        margin: 3px;
        text-decoration: none;
        cursor: pointer;
    }
        #pagination a.active {
            border-radius: 50%;
            background-color: #4c4a4a;
            color: whitesmoke;
        }
#pageNumbersContainer {
    display: flex;
    flex-wrap: wrap;
}
#pageNumbers {
    display: flex;
    padding: 2px;
}
.table-responsive table input[type=number] {
    width: 40px;
    height: 25px;
    border: 1px solid lightgray;
    text-align: center;
    margin: 5px;
    border-radius: 5px;
    outline: none;
}
.table-responsive table input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#goToPage {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
}
    #goToPage button {
        height: 35px;
        padding: 10px;
        align-items: center;
        font-weight: bold;
        border: none;
        border-radius: 4px;
        background-color: #4c4a4a;
        color: whitesmoke;
        cursor: pointer;
    }
#entriesDisplayDiv {
    display: flex;
    padding-left: 25px;
}
    #entriesDisplayDiv span {
        margin-left: 5px;
        margin-right: 5px;
    }

//main.js
let currentPage = 1;
let rowsPerPage = 10;
let totalPages;
const pageNumbers = document.getElementById("pageNumbers");
function paginateTable() {
    let table = document.getElementById("myTable");
    let rows = Array.from(table.rows).slice(1);
    totalPages = Math.ceil(rows.length / rowsPerPage);
    rows.forEach(row => row.style.display = "none");
    let start = (currentPage - 1) * rowsPerPage;
    let end = start + rowsPerPage;
    rows.slice(start, end).forEach(row => row.style.display = "");
    pageNumbers.innerHTML = "";
    createPageLink("<<", 1);
    createPageLink("<", currentPage - 1);
    let startPageNumber = currentPage < 5 ? 1 : (currentPage > totalPages - 2 ? totalPages - 4 : currentPage - 2);
    let endPageNumber = totalPages < 5 ? totalPages : (currentPage <= totalPages - 2 ? startPageNumber + 4 : totalPages);
    for (let i = startPageNumber; i <= endPageNumber; i++) {
        createPageLink(i, i);
    }
    createPageLink(">", currentPage + 1);
    createPageLink(">>", totalPages);
    setActivePageNumber();
    from.innerHTML = (currentPage - 1) * rowsPerPage + 1;
    to.innerHTML = currentPage === totalPages ? rows.length : (currentPage) * rowsPerPage;
    totalTableEntries.innerHTML = rows.length;
}
paginateTable();
function changePage(e, pageNumber) {
    if ((pageNumber == 0) || (pageNumber == totalPages + 1)) return;
    e.preventDefault();
    currentPage = pageNumber;
    pageNumberInput.value = "";
    paginateTable();
}
function setActivePageNumber() {
    document.querySelectorAll("#pageNumbers a").forEach(a => {
        if (a.innerText == currentPage) {
            a.classList.add("active");
        }
    });
}
function createPageLink(linkText, pageNumber) {
    let pageLink = document.createElement("a");
    pageLink.href = "#";
    pageLink.innerHTML = linkText;
    pageLink.addEventListener("click", function (e) {
        changePage(e, pageNumber);
    });
    pageNumbers.appendChild(pageLink);
}
goToPageButton.addEventListener("click", (e) => {
    changePage(e, pageNumberInput.value);
});

//index.cshtml


<div class="table-responsive">
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..." title="Type in a name">
   
    <table id="myTable">
  <thead>
            <tr class="header">
        <th class="order">
                        Contact No
                    </th>
        <th class="order">
                        Name
                    </th>
        <th class="order">
                        Email Address
                    </th>
                </tr>
  </thead>
  <tbody>
  </tbody>
          
        </table>
    </div>
<div id="pagination">
    <div id="entriesDisplayDiv">
        Showing <span id="from"> </span> to <span id="to"></span> out of <span id="totalTableEntries"></span> entries
    </div>
    <div id="pageNumbersContainer">
        <div id="pageNumbers"></div>
        <div id="goToPage">Go to Page <input id="pageNumberInput" type="number"><button id="goToPageButton">Confirm</button></div>
    </div>
</div>

    @section Scripts {
        @{
            await Html.RenderPartialAsync("_ValidationScriptsPartial");
        }
        <script type="text/javascript">
            $(document).ready(function () {
              
                loadData();
            });
            $("#productForm").submit(function (e) {
                e.preventDefault();
                var products = [];
            $("#myTable tbody tr").each(function () {
                    var product = {
                        Contuntno: $(this).find("td:eq(0)").text(),
                        Name: $(this).find("td:eq(1)").text(),
                        EmailAddress: $(this).find("td:eq(2)").text()
                    };
                    products.push(product);
                });
            });
            function loadData() {
                debugger
                $.ajax({
                    url: "/User/alluserList",
                    type: 'Get',
                    datatype: 'json',
                    success: function (data) {
                    // $('#myTable tbody').empty();
                        $.each(data, function (i, item) {
                            var rows = "<tr>"+
                            "<td date-lable='Contuct No'>" + item.username + "</td>"
                            + "<td date-lable='Name'>" + item.name + "</td>"
                            + "<td date-lable='Email'>" + item.emailAddress + "</td>"
                                + "</tr>";
                            $('#myTable tbody').append(rows);
                        });
                    }
                });
            }
        </script>
    }

Answer 1

Hi @Jewel ,

Calling method paginateTable() in the main.js doesn't work ，you can delete this line.

Once you've appended the html to the page, you can call paginateTable() in the function loadData.

Best regards,

Manman Xie

Answer 2

You don’t call paginateTable() after your async data load.