手写基于bootstraps的分页

手写基于bootstraps的分页

基于bootstrap的分页

方法/步骤1前端js：

function change(obj, obj1) {

var pageNo = $(obj).children().text();

var countPage = $('#countPage').text();

$('#pageNo').val(pageNo);

window.location.href = obj1 + pageNo;

}

2function prev() {

var pageNo = $('#pageNo').val();

var prev = parseInt(pageNo) - 1;

if (prev < 1) {

prev = 1;

alert("已是首页");

return ;

}

window.location.href =prev;

}

3function next() {

var pageNo = $('#pageNo').val();

var next = parseInt(pageNo) + 1;

var countPage = $('#countPage').text();

if (next > countPage) {

next = parseInt(countPage);

alert("已是最后一页");

return ;

}

window.location.href = next;

}

4前端引用：

${page.pageHtml }

5使用注意事项：

page 设置分页数据

pageNo 页码

pageSize页面展示长度

lenght 页面显示页码数

pageHtml直接调取到页面显示分页

pageUl 分页html中div的id

countPage 标签中总页数的id

6分页前端必须引用page.js文件，pageNo，countPage，pageUl 在页面做id使用过，不要重复

7分页增加体验，在页面加载完成后添加 active 样式；对当前页设置active样式；

$(function(){

$('#pageUl li').each(function(i){

var no = $(this).children().text();

var pageNo = $('#pageNo').val();

if(pageNo == no){

$(this).addClass("active")

}

})

})