Pagination table
by kpulkit29
HTML
<table cellspacing="0">
<thead>
<tr>
<th>Id</th>
<th>Address</th>
<th>PostCode</th>
<th>contact</th>
<th>Customer Email</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="pagination">
<button type="button" class="prev button">Prev</button>
<span class="pageTotal">Current Page: <i class="number">1</i></span>
<button type="button" class="next button">Next</button>
</div>
CSS
table th, table td {
padding: 10px;
width: auto;
border: 1px solid black;
}
th {
background: cyan;
}
JavaScript
const addressApiService = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([{
"id": 1,
"Address": "339 Macpherson Lane",
"Pin code": "768 11",
"customerEmail": "[email protected]",
"contact": "191-405-1109"
},
{
"id": 2,
"Address": "7268 Artisan Alley",
"Pin code": "",
"customerEmail": "[email protected]",
"contact": "123-774-0910"
},
{
"id": 3,
"Address": "618 Vera Center",
"Pin code": 25508,
"customerEmail": "[email protected]",
"contact": "373-145-5025"
},
{
"id": 4,
"Address": "09494 Tennessee Circle",
"Pin code": "",
"customerEmail": "[email protected]",
"contact": "830-640-2733"
},
{
"id": 5,
"Address": "23 Marquette Pass",
"Pin code": "98600-000",
"customerEmail": "[email protected]",
"contact": "908-558-1070"
},
{
"id": 6,
"Address": "66590 Eastwood Circle",
"Pin code": "",
"customerEmail": "[email protected]",
"contact": "445-628-4676"
},
{
"id": 7,
"Address": "1275 Fulton Crossing",
"Pin code": 24400,
"customerEmail": "[email protected]",
"contact": "164-756-5434"
},
{
"id": 8,
"Address": "64 Sullivan Trail",
"Pin code": "",
"customerEmail": "[email protected]",
"contact": "706-667-6734"
},
{
"id": 9,
"Address": "10 Judy Drive",
"Pin code": 412545,
"customerEmail": "[email protected]",
"contact": "105-875-7448"
},
{
"id": 10,
"Address": "44 Mcbride Hill",
"Pin code":...