前端实现分页器功能的插件

1.网上找的自己加以修改站在巨人的肩膀上

2.样式就不在重新写了具体情况具体对待

html 部分

<!DOCTYPE html>
<html>

</html>
<script type="text/javascript" src="js/jquery-1.8.2.js">
</script>
<script src="js/pagation.js" type="text/javascript" charset="utf-8"></script>

css 部分包括一个样式重置表（个人习惯比较省事和一小点样式）

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font-size:15px }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }

a { text-decoration:none;}
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0;}

/*/下面为一点小小的样式

.news-item{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.c-pages{
display: flex;
justify-content: space-around;
width:30%
}

JS 部分

/**分页js函数,forpage.js,此代码需要链接在html页面底部，同时需要先加载jquery框架**/

// li jquery object array
var newsLis = $("#news-lis").children();

// total news count
var count = newsLis.length;

// max count for one page
var ONE_PAGE_COUNT = 8;

// total pages
var totalPage = parseInt(count / ONE_PAGE_COUNT) + ((count % ONE_PAGE_COUNT) == 0? 0 : 1);

// init page
var currPage = 1;

// function used to set news count
function setUICount(count) {
if (count == undefined)
count = 0;
$("#cp-count").text(count);
}

// function used to set total pages
function setUIPages(totalPage) {
totalPage = Math.max(1, totalPage);
$("#total-page").text(totalPage)
}

// update curr page
function setUICurrPage(currPage) {
currPage = Math.max(1, currPage);
$("#curr-page").text(currPage);
}

// 传入显示的page参数，显示对应页面的新闻列表，隐藏其他列表
function scanAllForShow(page) {
// page at least 1 or max totalPage
page = Math.max(1, Math.min(totalPage, page));
for (var i = 0;i < count;i++) {
if (parseInt(i / ONE_PAGE_COUNT) + 1 == page)
$(newsLis[i]).attr("style", "");
else
$(newsLis[i]).attr("style", "display: none");
}
}

function homePage() {
currPage = 1;
scanAllForShow(currPage);
setUICurrPage(currPage);
}

function nexePage() {
var last = currPage;
if (last == totalPage)
return;

scanAllForShow(++currPage);

setUICurrPage(currPage);
}

function prevPage() {
var next = currPage;
if (next <= 1)
return;

scanAllForShow(--currPage);

setUICurrPage(currPage);
}

function lastPage() {
currPage = totalPage;
scanAllForShow(currPage);
setUICurrPage(currPage);
}

function goToPage() {
var target = $("#goToPage").val();
if (target == undefined)
target = currPage;
target = Math.max(1, Math.min(totalPage, target));
currPage = target;
scanAllForShow(target);
setUICurrPage(currPage);
$("#goToPage").val("");
}

// 页面加载完成后调用此函数
function init() {
newsLis = $("#news-lis").children();
count = newsLis.length;
totalPage = count / ONE_PAGE_COUNT + ((count % ONE_PAGE_COUNT) == 0? 0 : 1);
currPage = 1;
setUICount(count);
setUIPages(totalPage);
setUICurrPage(currPage);
scanAllForShow(currPage);
// 注册点击函数
$("#home").click(homePage);
$("#prev").click(prevPage);
$("#next").click(nexePage);
$("#last").click(lastPage);
$("#goTo").click(goToPage);

}

window.onload = function() {
init();
}

前端实现分页器功能的插件

猜你喜欢