前台分页html,Web前端 jQuery实现分页功能

/p>

网页前端开发教程:jq分页

.nav {

width: 100%;

height: 300px;

}

ul {

list-style: none;

}

ul li {

float: left;

width: 50px;

height: 50px;

border: 1px solid #E7EEEF;

text-align: center;

line-height: 50px;

cursor: pointer;

margin-left: 10px;

border-radius: 50%;

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

-khtml-user-select: none;

user-select: none;

}

/*#adlist {

list-style: none;

}

#adlist li {

float: left;

width: 50px;

height: 50px;

}*/

.active {

background-color: #25C8E0;

}

• 首页
• 上一页

• 2
• 3
• 4
• 5
• 6

• 下一页
• 尾页

// 假如url没有参数

// 最大页码

var pageNumMax = 10;

// 显示多少页码

var pageShow = 5; // 默认显示5个页码

// li显示的值在数组里面，通过操作数组来改变li的

var pageList = [1, 2, 3, 4, 5];

//(function () {

renderLi();

firstPageDeal();

//})();

// 根据数组的长度渲染页码li

function renderLi() {

var liShow = ”;

var firstPageNum = pageList[0];

for (var i = firstPageNum; i <= pageList[pageShow – 1]; i++) {

if (i == firstPageNum) {

liShow = ‘

‘ + i + ‘’;

} else {

liShow += ‘

‘ + i + ‘’;

}

}

$(‘#adlist’).

}

// 禁用按钮功能

function disableButton(selector) {

$(selector).

}

function enableButton(selector) {

$(selector).

}

// 获取当前页

function getCurrentPage() {

var currentPage = 0; //默认第一页 ，渲染li下标是从0开始

var haveActive = false;

$(‘#adlist li’).each(function (index) {

if ($(this).hasClass(‘active’)) {

currentPage = parseInt($(this).

haveActive = true;

// 跳出遍历循环

return false;

}

});

// 循环一次都没有找到active

if (haveActive === false) {

alert(‘获取当前页码出错’);

}

return currentPage;

}

// 获取active的下标

function getActiveInd() {

var activeInd = 1; // 默认1

$(‘#adlist li’).each(function (index) {

if ($(this).hasClass(‘active’)) {

activeInd = index;

// 跳出遍历循环

return false;

}

});

return activeInd;

}

/*切换页码的active状态

* selector 页码选择器

* index active的下标

*/

function switchActive(selector, index) {

$(selector).removeClass(‘active’);

$(selector).eq(index).attr(‘class’, ‘active’);

}

// 如果当前页是第一页就禁用首页和上页按钮

function firstPageDeal() {

if (getCurrentPage() === 1) {

disableButton(‘#firstPage’);

disableButton(‘#prePage’);

}

}

// 如果当前页是尾页禁用下页和尾页

function lastPageDeal() {

if (getCurrentPage() === pageNumMax) {

disableButton(‘#nextPage’);

disableButton(‘#lastPage’);

}

}

// 如果最大页码小于显示的最大页码，就禁用最大页码后面的页码按钮

if (pageNumMax < pageList[pageList.length – 1]) {

for (var i = pageNumMax; i < pageList[pageList.length – 1]; i++) {

disableButton(‘#adlist li:eq(‘ + i + ‘)’);

}

}

// 如果最后一个显示的页码等于最大页数，禁用尾页

if (pageList[pageList.length – 1] == pageNumMax) {

disableButton(‘#lastPage’);

}

// 点击对应的页码切换active

$(‘#adlist’).on(“click”, ‘li’, function () {

$(‘#adlist li’).removeClass(‘active’);

$(this).addClass(‘active’);

// 如果当前页大于第一页就启用首页和尾页

var curpage = getCurrentPage();

if (curpage > 1 && curpage < pageNumMax) {

enableButton(‘#firstPage’);

enableButton(‘#prePage’);

enableButton(‘#nextPage’);

enableButton(‘#lastPage’);

} else if (curpage == 1) {

disableButton(‘#firstPage’);

disableButton(‘#prePage’);

enableButton(‘#nextPage’);

enableButton(‘#lastPage’);

} else if (curpage == pageNumMax) {

enableButton(‘#firstPage’);

enableButton(‘#prePage’);

disableButton(‘#nextPage’);

disableButton(‘#lastPage’);

}

// TODO: 请求点击对应的页码的数据

});

// 更新页码

function updatePageNum(arr) {

$(‘#adlist li’).each(function (index) {

$(this).

});

}

/* 点击上一页功能

* 分两种情况 1 active在第一个li时并且li的页码不是1，需要刷新页码数组 然后acitve一直在第一个li

* 2 actvie不在第一个时，不用刷新数组，直接切换active

*/

function prePage() {

enableButton(‘#lastPage’);

enableButton(‘#nextPage’);

// 更新页码

if ($(‘#adlist li’).first().hasClass(‘active’)) {

// active一个li时更新页码

var newpageList = [];

pageList.map(function (val) {

var newVal = val – 1;

newpageList.push(newVal);

})

pageList = […newpageList];

// 更新li中的页码

updatePageNum(pageList);

if (getCurrentPage() == 1) {

disableButton(‘#firstPage’);

disableButton(‘#prePage’);

}

return;

}

$(‘#adlist’).find(‘li.active’).removeClass(‘active’).prev().addClass(‘active’);

// TODO: 请求上一页的数据

// 到第一页禁用按钮

if (getCurrentPage() == 1) {

disableButton(‘#firstPage’);

disableButton(‘#prePage’);

}

}

$(‘#prePage’).click(function () {

// 按钮禁用时不能按上一页

if ($(this).css(‘cursor’) === ‘not-allowed’) return;

prePage();

});

// 点击下一页功能

function nextPage() {

// 获取最后一个li的页码，判断是不是最大页码

var lastLiVal = parseInt($(‘#adlist li’).last().

var isLastPage = $(‘#adlist li’).last().hasClass(‘active’);

enableButton(‘#firstPage’);

enableButton(‘#prePage’);

if (lastLiVal <= pageNumMax && isLastPage) {

// active到最后一个li时更新页码

var newpageList = [];

pageList.map(function (val) {

var newVal = val + 1;

newpageList.push(newVal);

})

pageList = […newpageList];

// 更新li中的页码

updatePageNum(pageList);

if ($(‘#adlist li’).last().html() == pageNumMax) {

disableButton(‘#lastPage’);

disableButton(‘#nextPage’);

}

return;

}

// 先高亮再判断

$(‘#adlist’).find(‘li.active’).removeClass(‘active’).next().addClass(‘active’);

// TODO: 请求下一页的数据

// 到达尾页禁用按钮

if (lastLiVal == pageNumMax && $(‘#adlist li’).last().hasClass(‘active’)) {

disableButton(‘#nextPage’);

disableButton(‘#lastPage’);

}

}

$(‘#nextPage’).click(function () {

if ($(this).css(‘cursor’) === ‘not-allowed’) return;

nextPage();

});

// 首页

$(‘#firstPage’).click(function () {

// 清空页码数组

pageList.length = 0;

for (var i = 1; i <= pageShow; i++) {

pageList.push(i);

}

updatePageNum(pageList);

// 第一页高亮

$(‘#adlist li’).first().addClass(‘active’).siblings().removeClass(‘active’);

disableButton(‘#firstPage’);

disableButton(‘#prePage’);

enableButton(‘#lastPage’);

enableButton(‘#nextPage’);

// TODO: 请求首页的数据

});

// 尾页

$(‘#lastPage’).click(function () {

// 清空页码数组

pageList.length = 0;

for (var i = pageNumMax – pageShow + 1; i <= pageNumMax; i++) {

pageList.push(i);

}

updatePageNum(pageList);

// 最后页码高亮

$(‘#adlist li’).last().addClass(‘active’).siblings().removeClass(‘active’);

enableButton(‘#firstPage’);

enableButton(‘#prePage’);

disableButton(‘#nextPage’);

disableButton(‘#lastPage’);

// TODO: 请求尾页的数据

});