基于jquery的web分页实现(2)

• 5.完整js代码

• 6.效果图

1.前言

---

之前写过一次web分页的实现，但是那次写得不够完美，还有许多需要改进得地方。其次上次写得那个是使用原生js写的，代码量比较多。所以这次选取了jquery来实现。其实思想都是差不多的。虽然这次实现完成了，但是我觉得很有必要将自己实现的东西好好总结一下。在我看来，其实学编程就是要善于总结。所以很有必要取描述一下我写这个作品的思路。

2.工具

---

1.jquery版本：jquery-1.11.0.js

2.分页视图：使用bootstrap实现。不过只给出了视图效果，其他逻辑没有给出，所以需要自己编写。

3.使用jstl语法动态展示数字方块的数量。因为这次分页的实现是在用jsp写一个小项目时需要用到分页，所以采用了jstl来动态展示分页。

4.数字变换和<< 、>>的业务逻辑使用jquery实现。具体见代码。

3.写代码之前的思考

---

1.首先一个分页由一下几个部分组成：

1.<< 和 >> （需要控制它们的显示和隐藏）

2.数字方块 （需要控制数字的变化）

主要实现的就是这2个问题。

2.具体分析

1.影响<< 和 >> 的因素有：点击<< 和 >>以及 点击数字方块的2个时机。

所以我们可以根据这两个因素来控制对<< 和 >> 的隐藏和显示。

2.影响数字变化的原生有：点击<< 和 >>以及 点击数字方块的2个时机（和上面一样）所以我们可以根据这两个因素来控制方块上数字的变化。

3.通过对<< 、>>、数字方块添加点击事件来操作业务逻辑。把影响的变化的因素放在事件里面。但是一定要注意放的位置顺序。

4.具体操作

---

1.对<< 和 >> 的控制我使用一个函数：function controL_R(current,count)来控制。current：代表当前第几页。count：代表总的页数。通过这两个参数再进行if-else的拆分可以进行控制<<和 >>，具体代码如下：

对<< 和 >> 的控制

/*从参数我们可以得知，

影响这个函数执行结果的变量莫过于

current：当前第几页。count可以看成一个常量。

所以在调用这个函数时，一定要放在最终current结果之后。

因为curret影响该函数的执行。

我就是因为没有方队位置，导致一直得不到正确结果。*/

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”)

<