jquery在前端分页 jquery 分页

基于jquery的web分页实现

文章目录

• 基于jquery的web分页实现

• 1.前言
• 2.工具
• 3.写代码之前的思考

• 1.首先一个分页由一下几个部分组成：
• 2.具体分析

• 4.具体操作

• 对<< 和 >> 的控制
• 控制方块数字的变化
• 对数字的变化控制关键步骤
• 触发事件的代码
• 小方块背景颜色的控制
• 页面实现代码（使用jstl动态控制）

• 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")
            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")
            }
        }

    }

控制方块数字的变化

这里我使用3个函数来对其进行控制：
1.function fit_left() ， 点击左边 << 会影响数字变化
2.function fit_right() 点击左边 >> 会影响数字变化
3.function fit_number() 点击数字方块会影响数字变化
下面是他们具体的代码：

function fit_left()：

function fit_left(){
        var i=0,j=0
        if (current>1){
            current-=1
            /*因为要获取最新的current，所以需要调用该函数
            （first_number和last_number的获取依赖current值）*/
            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()：

function fit_right(){
        var i=0,j=0
        //第一个和最后一个数字依赖于当前的页面，所以前面要进行调用
        if (current<count){
            current+=1
            /*因为要获取最新的current，所以需要调用该函数
            （first_number和last_number的获取依赖current值）*/
            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()：

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]+.?[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动态控制）

<!--分页区域-->
    <div class="pageing">
        <ul class="pagination">
            <li class="showdataLi">
                <a href="#">
                    一共20条数据,每页<input type="text" id="dataCount"/>条
                    当前为第<input type="text" id="currentPage">页
                </a>
            </li>
            <li>
                <a href="#" id="left_fit">«</a>
            </li>
<%--            如果展示的数据不为空--%>
<%--
<%--                循环展示数字方块
                    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">
                        <li><a href="#" class="number">${item}</a></li>
                    </c:forEach>
                </c:if>
                <c:if test="${applicationScope.get('totalPageNum')<=6}" var="totalPageNum">
                    <c:forEach  var="item" begin="1" end="${totalPageNum}">
                        <li><a href="#" class="number">${item}</a></li>
                    </c:forEach>
                </c:if>
            </c:if>

            <li>
                <a href="#" id="right_fit">»</a>
            </li>
        </ul>
    </div>

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]+.?[0-9]*/;//判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/
        // 如果a标签的值不是数字的话
        if (!re.test(e.target.innerHTML)) {
        }else{
            current=parseInt(e.target.innerHTML)
            // 2.点击小方块的数字
            fit_number()
            controL_R(current,count)
        }
        setBackground()
        console.log("current="+current)
    })


//-----------------------------下面为控制逻辑--------------------------------------------------------------
    // 控制<<和>>的显示 和数字的变化
    // 1.点击<<和>>
    $('#left_fit').click(function (){
        fit_left()
        controL_R(current,count)  // 因为要获取最新的current，所以这行必须放在上面那句的后面
        setBackground()
        console.log("current="+current)
    })
    $('#right_fit').click(function (){
        fit_right()
        controL_R(current,count)
        setBackground()
        console.log("current="+current)
    })





    // 对分页进行设置
    $("input[id='dataCount']").css("height","18px")
    $("input[id='dataCount']").css("width","30px")

    $("input[id='currentPage']").css("height","18px")
    $("input[id='currentPage']").css("width","30px")

    $(".pageing ul li").css({"font-size":"17px"})

6.效果图