html分页功能如何实现原理,前端 JS 分页功能的实现

page.js文件内容

function buildPagination(pageNo, pageSize, total){

if(total <= 0){

return;

}

var maxPage = parseInt(total / pageSize);

if((total % pageSize) > 0){

maxPage ++;

}

var firstHtml = "

«";

var lastHtml = "

»";

$(".pagination").append(firstHtml);

var start = (pageNo - 2) > 0 ? (pageNo - 2) : 1;

var end = (maxPage - pageNo) > 2 ? (pageNo + 2) : maxPage;

for(var i = start; i <= end; i ++){

if(i == pageNo ){

$(".pagination").append("

"+i+"");

}else{

$(".pagination").append("

"+i+"");

}

}

$(".pagination").append(lastHtml);

}

html页面内容

var pageNum = 1;

// 分页

function setPageNo(pageNo) {

pageNum = pageNo;

pageSearch();

}

页面效果如下