2024年Web前端最新基于jquery的web分页实现，前端 MVP模式详解

最新推荐文章于 2024-09-01 14:04:36 发布

2401_84435866

最新推荐文章于 2024-09-01 14:04:36 发布

阅读量765

点赞数 15

分类专栏：程序员文章标签：前端 jquery javascript

本文链接：https://blog.csdn.net/2401_84435866/article/details/138486654

版权

程序员专栏收录该内容

165 篇文章 0 订阅

订阅专栏

文末

js前端的重头戏，值得花大部分时间学习。

JavaScript知识

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

前端电子书

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程现代 JavaScript 教程，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

288页面试题

function fit_number(){

var i=0,j=0

/用于获取最新的first_number 和 last_number/

get_first_last_Number()

for(i=first_number;i<=last_number;i++){

$(“div.pageing ul li a[class=‘number’]”)[j].innerHTML=i

j++

}

对数字的变化控制关键步骤

我的最多展示6个小方块。很容易我们可以知道，这6个方块的都是连续的，差值=1。所以我只要知道第一个方块的数字和最后一个方块的数字即可。然后通过for循环遍历那些展示的方块即可得改变每个方块得数字。所以这里我使用一个函数来得到：first_number 和 last_number.该函数为：function get_first_last_Number()

function get_first_last_Number()

/特别注意：一定要对情况分析详尽，不然会出问题/

function get_first_last_Number(){

if(count>6 && count<=getDataCount()){

if(current>=4 && current<=8){

first_number=current-3

last_number=first_number+5

}

if(current>=1 && current<=3){

first_number=1

last_number=6

}

if(count>=1 && count<=6){

first_number=1

last_number=count

}

触发事件的代码

1.左点击<<

/因为这里调用前面的函数，所以代码量较少/

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

fit_left()

controL_R(current,count) // 因为要获取最新的current，所以这行必须放在上面那句的后面

setBackground()

console.log(“current=”+current)

})

2.右点击>>

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

fit_right()

controL_R(current,count)

setBackground()

console.log(“current=”+current)

})

3.数字方块点击

$(“div.pageing ul li a[class=‘number’]”).click(function (e){

// 对分页下的a标签添加一个点击事件

var re = /¹+.?[0-9]*/;//判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/

// 如果a标签的值不是数字的话

if (!re.test(e.target.innerHTML)) {

}else{

/因为元素的值为string，需要转换为int类型才可以进行传递，不然会出问题/

current=parseInt(e.target.innerHTML)

// 2.点击小方块的数字

fit_number()

// 因为fit_number()会影响current的变化，所以 controL_R()要放在它下面

controL_R(current,count)

}

/* 因为setBackground()控制颜色变化是由current控制，

所以它需要获取最新的current值，所以放在最后*/

setBackground()

console.log(“current=”+current)

})

小方块背景颜色的控制

思路：先获取当前展示的数字方块，然后将它们的颜色变为原来的颜色，最后将方块值=current的方块颜色标记为pink。即可实现。代码如下：

/*特别注意：

因为setBackground()控制颜色变化是由current控制，

所以它需要获取最新的current值，所以放在事件函数的最后*/

function setBackground(){

// 对所有数字方块的颜色恢复到原色白色

$(“div.pageing ul li a[class=‘number’]”).each(function (index,ele){

$(this).css(“background-color”,“white”)

})

$(“div.pageing ul li a[class=‘number’]”).each(function (index,ele){

if(parseInt(ele.innerHTML)==current){

$(this).css(“background-color”,“pink”)

}

})

}

页面实现代码（使用jstl动态控制）

一共20条数据,每页条

当前为第页
«

<%-- 如果展示的数据不为空–%>

<%–

<%-- 循环展示数字方块

var:为当循环的值将每个循环变量保存在item中

${applicationScope.get(‘pageNum’)}

count=${applicationScope.get(‘totalPageNum’)}

current:代表当前页，初始化为1（如果有数据的话）

–%>

<c:if test=“${applicationScope.get(‘totalPageNum’)>0}”>

<c:if test=“${applicationScope.get(‘totalPageNum’)>6}” var=“totalPageNum”>

<c:forEach var=“item” begin=“1” end=“6”>
${item}
</c:forEach>

</c:if>

<c:if test=“${applicationScope.get(‘totalPageNum’)<=6}” var=“totalPageNum”>

<c:forEach var=“item” begin=“1” end=“${totalPageNum}”>
${item}
</c:forEach>

</c:if>

</c:if>
»

5.完整js代码

还有一点特别注意：一定要对这些变量初始化。比如：first_number、last_number、current 等。！！！！！。。。。

// 对分页进行控制

var first_number=0

var last_number=0

var current=1 // 初始化当前页面为第1页

var count=getDataCount()//总的页数

// 1.控制<<和>>的显示影响<< 和 >> 变化的因素：1.点击<<和>> 2.点击小方块的数字

function controL_R(current,count){

if(count>=1 && count<=6){

if(current>1 && current<6){

// 显示<< 和 >>

$(‘#left_fit’).css(“display”,“block”)

$(‘#right_fit’).css(“display”,“block”)

console.log(“left:y right:y”)

}else if(current==1){

// 显示>>

$(‘#left_fit’).css(“display”,“none”)

$(‘#right_fit’).css(“display”,“block”)

console.log(“left:n right:y”)

}else{

// 显示<<

$(‘#left_fit’).css(“display”,“block”)

$(‘#right_fit’).css(“display”,“none”)

console.log(“left:y right:n”)

}

}

if(count==0){

// 不显示 << 和 >>

$(‘#left_fit’).css(“display”,“none”)

$(‘#right_fit’).css(“display”,“none”)

console.log(“left:n right:n”)

}

if (count>6){

if(1<current && current<count){

// 显示<< 和 >>

$(‘#left_fit’).css(“display”,“block”)

$(‘#right_fit’).css(“display”,“block”)

console.log(“left:y right:y”)

}

if (current==count){

// 显示<<

$(‘#left_fit’).css(“display”,“block”)

$(‘#right_fit’).css(“display”,“none”)

console.log(“left:y right:n”)

}

if (current==1){

// 显示<<

$(‘#left_fit’).css(“display”,“none”)

$(‘#right_fit’).css(“display”,“block”)

console.log(“left:y right:n”)

}

}

}

// 初始化当前页小方块的颜色

$(“div.pageing ul li a[class=‘number’]:first”).css(“background-color”,“pink”)

// 获取页面所展示数据总的页数这里必须和servletContext中 key=totalPageNum的数量一样

function getDataCount(){

var count=10

return count

}

// 对第一个方块的数字和最后一个方块的数字做判断

function get_first_last_Number(){

if(count>6 && count<=getDataCount()){

if(current>=4 && current<=8){

first_number=current-3

last_number=first_number+5

}

if(current>=1 && current<=3){

first_number=1

last_number=6

}

}

if(count>=1 && count<=6){

first_number=1

last_number=count

}

}

// 点击<<时对数字的控制函数

function fit_left(){

var i=0,j=0

get_first_last_Number()

if (current>1){

current-=1

get_first_last_Number()

console.log(“first_number=”+first_number+" "+“last_number=”+last_number)

// 对每个数字减1

for(i=first_number;i<=last_number;i++){

$(“div.pageing ul li a[class=‘number’]”)[j].innerHTML=i

j++

}

}else {

console.log(“第一个数字=1”)

return

}

}

// 点击>>时对数字的控制函数

function fit_right(){

var i=0,j=0

//第一个和最后一个数字依赖于当前的页面，所以前面要进行调用

get_first_last_Number()

if (current<count){

current+=1

get_first_last_Number()

console.log(“first_number=”+first_number+" "+“last_number=”+last_number)

for(i=first_number;i<=last_number;i++){

$(“div.pageing ul li a[class=‘number’]”)[j].innerHTML=i

j++

}

}else {

console.log(“最后一个方块的数字=”+count+“–不能再+了”)

return

}

}

// 点击带有数字的小方块时对数字的控制函数

function fit_number(){

var i=0,j=0

get_first_last_Number()

for(i=first_number;i<=last_number;i++){

$(“div.pageing ul li a[class=‘number’]”)[j].innerHTML=i

j++

}

}

// 对first_number 和 last_number 作初始化

function init_first_last(){

if(count>=6){

first_number=1

last_number=6

}

if(count<6){

first_number=1

last_number=count

}

}

// 给当前点击的小方块设置背景颜色

function setBackground(){

// 对所有数字方块的颜色恢复到原色白色

$(“div.pageing ul li a[class=‘number’]”).each(function (index,ele){

$(this).css(“background-color”,“white”)

})

$(“div.pageing ul li a[class=‘number’]”).each(function (index,ele){

if(parseInt(ele.innerHTML)==current){

$(this).css(“background-color”,“pink”)

}

})

}

init_first_last()

setBackground()

// 初始化<< 和 >>的显示

controL_R(current,count)

// 获取当前点击的数字保存在变量current中-------------------------------------------------

$(“div.pageing ul li a[class=‘number’]”).click(function (e){

// 对分页下的a标签添加一个点击事件

var re = /²+.?[0-9]*/;//判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/

// 如果a标签的值不是数字的话

if (!re.test(e.target.innerHTML)) {

}else{

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程现代 JavaScript 教程，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题
1. 0-9 ↩︎
2. 0-9 ↩︎