前台js分页，自己手写逻辑2

最新推荐文章于 2025-08-07 14:42:17 发布

转载最新推荐文章于 2025-08-07 14:42:17 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zrui-xyu/p/5695658.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的分页查询方法，该方法通过POST请求获取数据，并利用页面限制和开始位置参数来控制每页显示的数据量。此外，还实现了动态生成分页链接的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//设置分页
var pageSize = 10;
//设置一次显示多少页
var pageLimit = 5;
$(function(){
    $.post("rest/rtdbfix/listAll",{start:0,limit:pageSize},function(result){
        console.log(result);
        if(!result || result.length==0){
            return;
        }
         //计算当前有多少页
        var pageTotal = Math.ceil(result[0].recordsTotal/pageSize);
        //当前页数
        var currentPage = 0;
        //临时变量，比较数目大小
        var count = 0;
        //比较当前应显示多少数据
        if(result[0].recordsTotal<=pageSize){
            count = msg.length;
        }else{
            count = pageSize;
        }
        //存储内容
        var temp = "<table><tr><td>SUID</td><td>SNAME</td><td>SPOTTYPE</td><td>SUNIT</td><td>LIMITUPPER</td><td>LIMITLOWER</td><td>NLEVEL</td><td>SVALUE</td></tr>";
        for(var i=0;i<result.length;i++){
            var str = "<tr><td>"+result[i].suid+"</td>"
                    +"<td>"+result[i].sname+"</td>"
                    +"<td>"+result[i].spottype+"</td>"
                    +"<td>"+result[i].sunit+"</td>"
                    +"<td>"+result[i].limitupper+"</td>"
                    +"<td>"+result[i].limitlower+"</td>"
                    +"<td>"+result[i].nlevel+"</td>"
                    +"<td>"+result[i].svalue+"</td>";
            temp += str;
        }
        temp += "</table>";
        //分页
        temp += '<div>'
                +'<a href="javascript:void(0)" onclick="changePage('+0+','+pageTotal+','+0+')">首页</a>'
                +'<a href="javascript:void(0)" onclick="changePage('+((0-1)*pageSize)+','+pageTotal+','+(currentPage-1)+')">上一页</a>';
                //如果总页数大于设置的页数，则
                if(pageTotal>pageLimit){
                    for(var i=0;i<pageLimit;i++){
                        temp += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                    }
                        temp += '<a style="cursor: not-allowed;">......</a>';
                }else{
                    for(var i=0;i<pageTotal;i++){
                        temp += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                    }
                }
                temp += '<a href="javascript:void(0)" onclick="changePage('+((0+1)*pageSize)+','+pageTotal+','+(currentPage+1)+')">下一页</a>'
                   +'<a href="javascript:void(0)" onclick="changePage('+((pageTotal-1)*pageSize)+','+pageTotal+','+(pageTotal-1)+')">尾页</a>'
                +'</div>';
        
        
        $("#content").html(temp);
    });
});
function changePage(start,pageTotal,currentPage){
    if(start<0){
        start = 0;
        currentPage+=1;
    }
    if(currentPage>pageTotal){
        start = start - pageSize;
        currentPage-=1;
    }
    $.ajaxSetup({async : false}); 
    $.post("rest/rtdbfix/listAll",{start:start,limit:pageSize},function(result){
        if(!result || result.length==0){
            return;
        }
        var temp = "<table><tr><td>SUID</td><td>SNAME</td><td>SPOTTYPE</td><td>SUNIT</td><td>LIMITUPPER</td><td>LIMITLOWER</td><td>NLEVEL</td><td>SVALUE</td></tr>";
        for(var i=0;i<result.length;i++){
            var str = "<tr><td>"+result[i].suid+"</td>"
                    +"<td>"+result[i].sname+"</td>"
                    +"<td>"+result[i].spottype+"</td>"
                    +"<td>"+result[i].sunit+"</td>"
                    +"<td>"+result[i].limitupper+"</td>"
                    +"<td>"+result[i].limitlower+"</td>"
                    +"<td>"+result[i].nlevel+"</td>"
                    +"<td>"+result[i].svalue+"</td>";
            temp += str;
        }
        temp += "</table>";
        //分页
        temp += '<div>'
                +'<a href="javascript:void(0)" onclick="changePage('+0+','+pageTotal+','+0+')">首页</a>'
                +'<a href="javascript:void(0)" onclick="changePage('+((currentPage-1)*pageSize)+','+pageTotal+','+(currentPage-1)+')">上一页</a>';
                if(pageTotal > pageLimit){
                    //判断如果是小于当前页数
                    if(currentPage<Math.ceil(pageLimit/2)){
                        for(var i=0;i<pageLimit;i++){
                            temp += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                        }
                        temp += '<a style="cursor: not-allowed;">......</a>';
                    //判断尾页
                    }else if(pageTotal<(currentPage+Math.ceil(pageLimit/2))){
                        temp += '<a style="cursor: not-allowed;">......</a>';
                        for(var i=(pageTotal-pageLimit);i<pageTotal;i++){
                            temp += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                        }
                    //判断中间页
                    }else{
                        temp += '<a style="cursor: not-allowed;">......</a>';
                        for(var i=(currentPage-Math.ceil(pageLimit/2)+1);i<(pageLimit+currentPage-Math.ceil(pageLimit/2)+1);i++){
                            temp += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                        }
                        temp += '<a style="cursor: not-allowed;">......</a>';
                    }
                }else{
                    for(var i=0;i<pageTotal;i++){
                        temp += '<a href="javascript:void(0)" onclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                    }
                }
                temp += '<a href="javascript:void(0)" onclick="changePage('+((currentPage+1)*pageSize)+','+pageTotal+','+(currentPage+1)+')">下一页</a>'
                +'<a href="javascript:void(0)" onclick="changePage('+((pageTotal-1)*pageSize)+','+pageTotal+','+(pageTotal-1)+')">尾页</a>'
                +'</div>';
                
        $("#content").html(temp);
    });
}