zoukankan      html  css  js  c++  java
  • 前台js分页,自己手写逻辑2

    //设置分页
    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);
        });
    }
  • 相关阅读:
    模型绑定功能
    接口返回的内容
    跨平台的ASP.NET Core简介
    NLog如何打印日志(.Net5)
    注意力创造价值;
    Restful接口的介绍
    电脑设置双屏显示(windows)
    Linq多集合连接
    调试时才执行的代码
    mvc4 路由匹配测试
  • 原文地址:https://www.cnblogs.com/zrui-xyu/p/5695658.html
Copyright © 2011-2022 走看看