如何用js实现简单分页的功能？（代码示例）-js教程-PHP中文网

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

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

1.HTML代码：

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);
    }