js 返回上一页面_js实现简单分页的功能（代码示例）

点击蓝字关注我们！每天获取最新的编程小知识！

源 / php中文网      源 / www.php.cn

分页功能对于网站建设来说，基本上是必不可少的。那么如何使用js实现简单的分页功能呢？对于新手或者非资深程序员来说，本篇文章关于js分页功能实现的介绍或许有所帮助。

js实现简单分页代码示例如下：

1.HTML代码：

class=" " id="pagecontrol">

                                    "prepage">上一页

                                    class="num current">1

                                    class="num">2

                                    class="num">3

                                    class="num">4

                                    class="num">5

                                    "nextpage">下一页

2.js代码：

$(function(){

        var curpage=1;//当前页码

        var maxpage = 10;//最大页码

        if(maxpage > 1)

            $("#nextpage").addClass("active");

        $("#rowsToshow").change(function(){

            console.log($("#rowsToshow").val());

        })

        $("#prepage").live("click",function(){

            curpage = curpage - 1;

            pageshow(curpage,maxpage);

        })

        $("#nextpage").live("click",function(){

            curpage = curpage + 1;

            pageshow(curpage,maxpage);

        })

        $("#pagecontrol li a").live("click",function(){

            curpage = Number($(this).text());

            pageshow(curpage,maxpage);

        })

    })

    function pageshow(cp,tp){

        var sp = cp - 2;//startpage

        var ep = cp + 2;//endpage

        var eoff = ep - tp;//tp:totalpage

        if(eoff>0){

                sp = sp - eoff;

        }

        if(sp<=0){

            ep = ep -sp + 1;

        }

        var str = '';

        if(cp != 1)

            str = str + '

上一页'

        else

            str = str + '

上一页'

        for(var i= sp;i<=ep;i++){

            if(i>0&& i<=tp){

                if(i == cp)

                    str = str + ''+i+'';

                else

                    str = str + ''+i+'';

            }

        }

        if(cp != tp)

            str = str + '下一页';

        else

            str = str + '下一页';

        $("#pagecontrol").html(str);

    }

-END-

声明：本文选自「 php中文网 」，搜索「 phpcnnew 」即可关注！

▼