Custom Pagination Using HTML, CSS and jQuery

HTML

CSS

Output

HTML Copied

<!doctype html>
<html lang="en">

<head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <title>Custom Pagination Using HTML, CSS and jQuery</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <h3 class="heading">Table Pagination Using JQuery</h3>
                <div class="table-main-div">
                    <div class="container table-responsive">
                        <table class="table-area" id="table1">
                            <thead>
                                <th>#</th>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Office</th>
                                <th>start_date</th>
                                <th>Salary</th>
                            </thead>
                            <tbody> </tbody>
                        </table>
                    </div>
                </div>
                <div class="pagination-btn-div">
                    <div class="paginationDetail">
                        <p>Showing <span id="tableStartFrom">0</span> to <span id="tableEndTo">0</span> of <span
                                id="tableEntries">0</span></p>
                    </div>
                    <div>
                        <ul class="pagination"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

CSS Copied

.heading {
  font-size: 24px;
  text-align: center;
  margin-block: 35px;
  font-weight: 700;
  color: #0d4688;
}

.table-main-div {
  margin-top: 20px;
}

.table-main-div .table-responsive {
  overflow-x: auto;
}

.table-main-div table.table-area {
  width: 100%;
  border-spacing: 0;
  border-radius: 5px;
  overflow: hidden;
}

.table-main-div table.table-area thead {
  visibility: visible;
  position: relative;
}

.table-main-div table.table-area thead tr {
  border: none;
  border-bottom: 1px solid #a8a8a8;
}

.table-main-div table.table-area thead tr th {
  text-align: left;
  background: #d5fdd7;
  border: none;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  padding: 15px;
  white-space: nowrap;
}

.table-main-div table.table-area thead tr th:nth-last-child(1) {
  text-align: left;
}

.table-main-div table.table-area tr {
  display: table-row;
  border: none;
  border-radius: 0;
  text-align: left;
  border: none;
  border-bottom: 1px solid #eee;
}

.table-main-div table.table-area tr:hover {
  background-color: #f2f9fc;
}

.table-main-div table.table-area tr td {
  display: table-cell;
  border: none;
  padding: 12px 15px;
  color: #212121;
  font-size: 16px;
  font-weight: 400;
}

.table-main-div table.table-area tr td:nth-last-child(1) {
  text-align: left;
}

.table-main-div table.table-area tr:nth-child(odd) {
  background: #c5e3fc;
}

.pagination-btn-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 25px;
}

.pagination-btn-div .paginationDetail p {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.pagination-btn-div .paginationDetail p span {
  font-weight: 600;
}

.pagination-btn-div ul.pagination li.active a {
  background: #0d4688;
  border: 1px solid #0d4688;
}

.pagination-btn-div ul.pagination li a {
  color: #0d4688;
}

JS Copied

// Users List Start
        const users = [
         
            {
                "name": "Fiona Green",
                "position": "Chief Operating Officer (COO)",
                "office": "San Francisco",
                "code": "2947",
                "start_date": "2010/03/11",
                "salary": "$850,000"
            },
            {
                "name": "Shou Itou",
                "position": "Regional Marketing",
                "office": "Tokyo",
                "code": "8899",
                "start_date": "2011/08/14",
                "salary": "$163,000"
            },
            {
                "name": "Michelle House",
                "position": "Integration Specialist",
                "office": "Sydney",
                "code": "2769",
                "start_date": "2011/06/02",
                "salary": "$95,400"
            },
            {
                "name": "Suki Burks",
                "position": "Developer",
                "office": "London",
                "code": "6832",
                "start_date": "2009/10/22",
                "salary": "$114,500"
            },
            {
                "name": "Prescott Bartlett",
                "position": "Technical Author",
                "office": "London",
                "code": "3606",
                "start_date": "2011/05/07",
                "salary": "$145,000"
            },
            {
                "name": "Gavin Cortez",
                "position": "Team Leader",
                "office": "San Francisco",
                "code": "2860",
                "start_date": "2008/10/26",
                "salary": "$235,500"
            },
            {
                "name": "Martena Mccray",
                "position": "Post-Sales support",
                "office": "Edinburgh",
                "code": "8240",
                "start_date": "2011/03/09",
                "salary": "$324,050"
            },
            {
                "name": "Unity Butler",
                "position": "Marketing Designer",
                "office": "San Francisco",
                "code": "5384",
                "start_date": "2009/12/09",
                "salary": "$85,675"
            },
            {
                "name": "Howard Hatfield",
                "position": "Office Manager",
                "office": "San Francisco",
                "code": "7031",
                "start_date": "2008/12/16",
                "salary": "$164,500"
            },
            {
                "name": "Hope Fuentes",
                "position": "Secretary",
                "office": "San Francisco",
                "code": "6318",
                "start_date": "2010/02/12",
                "salary": "$109,850"
            },
            {
                "name": "Vivian Harrell",
                "position": "Financial Controller",
                "office": "San Francisco",
                "code": "9422",
                "start_date": "2009/02/14",
                "salary": "$452,500"
            },
            {
                "name": "Timothy Mooney",
                "position": "Office Manager",
                "office": "London",
                "code": "7580",
                "start_date": "2008/12/11",
                "salary": "$136,200"
            },
            {
                "name": "Jackson Bradshaw",
                "position": "Director",
                "office": "New York",
                "code": "1042",
                "start_date": "2008/09/26",
                "salary": "$645,750"
            },
            {
                "name": "Olivia Liang",
                "position": "Support Engineer",
                "office": "Singapore",
                "code": "2120",
                "start_date": "2011/02/03",
                "salary": "$234,500"
            },
            {
                "name": "Bruno Nash",
                "position": "Software Engineer",
                "office": "London",
                "code": "6222",
                "start_date": "2011/05/03",
                "salary": "$163,500"
            },
            {
                "name": "Sakura Yamamoto",
                "position": "Support Engineer",
                "office": "Tokyo",
                "code": "9383",
                "start_date": "2009/08/19",
                "salary": "$139,575"
            },
            {
                "name": "Thor Walton",
                "position": "Developer",
                "office": "New York",
                "code": "8327",
                "start_date": "2013/08/11",
                "salary": "$98,540"
            },

]
        // Users List End

// Not changable script for custom pagination start
        function pagination(list, perPage = 10, currentPage = 1, maxUiPages = 10) {
            let totalPage = Math.ceil(list.length / perPage);
            let previous = false;
            let next = false;
            let first_page = false;
            let last_page = false;
            let from = ((currentPage - 1) * perPage) + 1;
            let to = 0;
            let pages = [];

let currentData = list.filter((item, index) => {
                if (index < perPage * currentPage && index >= (perPage * currentPage) - perPage) {
                    return true;
                }
            })

for (let index = 0; index < totalPage; index++) {
                pages.push(index + 1);
            }

to = (from + currentData.length) - 1;
            if (currentPage > 1) {
                previous = currentPage - 1;
                first_page = 1;
            }

if (currentPage < totalPage) {
                next = currentPage + 1;
                last_page = pages.length;
            }

let response = {
                data: currentData,
                total_entries: list.length,
                pages: pages,
                ui_pages: uiPages(currentPage, maxUiPages, pages.length),
                from: from,
                to: to,
                next_page: next,
                first_page: first_page,
                last_page: last_page,
                previous_page: previous,
            };

return response;
        }

}
                    pages.push('..');
                    pages.push(total_page - 1);
                    pages.push(total_page);
                } else {
                    for (let index = 1; index <= maxPage; index++) {
                        pages.push(total_page - (maxPage - index));
                    }
                }
            } else {
                for (let index = 1; index <= total_page; index++) {
                    pages.push(index);
                }
            }

return pages
        }
        // Not changable script for custom pagination end

// Modify Pagination start
        var table1 = {
            page: 1,
            perpage: 5,
        };

$(document).ready(() => {
            generateTable();
        })

if (table.ui_pages.length) {
                table.ui_pages.forEach(element => {
                    li += `<li class="page-item ${element === table1.page ? 'active' : ''}" onclick="paginateTable(${Number(element) ? element : 0})"><a class="page-link" href="#">${element}</a></li>`;
                })
            }

if (table.next_page) {
                li += `<li class="page-item" onclick="paginateTable(${table.last_page})"><a class="page-link" href="#">Last</a></li>`;
                li += `<li class="page-item" onclick="paginateTable(${table.next_page})"><a class="page-link" href="#">Next</a></li>`;
            }

$('#tableStartFrom').text(table.from);
            $('#tableEndTo').text(table.to);
            $('#tableEntries').text(table.total_entries);
            $('.pagination').html(li);
        }

function paginateTable(page) {
            if (!page) {
                return false;
            }
            table1.page = page;
            generateTable();
        }
// Modify Pagination End