Paginated Data Table
A data table with client-side pagination and prev/next controls.
Requires Bootstrap 5. Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><div class="card border-0 shadow-sm" style="max-width:400px"><div class="card-body p-0">
<table class="table table-hover mb-0 small"><thead class="table-light"><tr><th>#</th><th>Name</th><th>Status</th></tr></thead><tbody id="pgBody"></tbody></table>
<div class="d-flex justify-content-between align-items-center p-2 border-top"><small class="text-secondary" id="pgInfo"></small><div class="btn-group btn-group-sm"><button class="btn btn-outline-secondary" id="pgPrev">‹</button><button class="btn btn-outline-secondary" id="pgNext">›</button></div></div>
</div></div>var rows=[];for(var i=1;i<=23;i++)rows.push([i,'User '+i,i%3===0?'Pending':'Active']);
var per=6,page=0,body=document.getElementById('pgBody'),info=document.getElementById('pgInfo');
function render(){var st=page*per,pg=rows.slice(st,st+per);body.innerHTML=pg.map(function(r){return '<tr><td>'+r[0]+'</td><td>'+r[1]+'</td><td><span class="badge text-bg-'+(r[2]==='Active'?'success':'warning')+'">'+r[2]+'</span></td></tr>'}).join('');info.textContent='Page '+(page+1)+' of '+Math.ceil(rows.length/per)}
document.getElementById('pgPrev').onclick=function(){if(page>0){page--;render()}};
document.getElementById('pgNext').onclick=function(){if((page+1)*per<rows.length){page++;render()}};
render();Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.