前端JQ实现伪分页

时间 2019-12-13
原文原文链接
毕设的使用ssm+maven来写的，有个分页的需求，因为仅仅是毕设，涉及到的数据量不大，为了多个分页的功能（说不定就由于这个功能加分呢。。。），但又不想去动sql，写limit，因而灵机一动，先把数据取到前端，利用append来动态渲染页面，实现一个伪分页的效果岂不是妙哉，话很少说，上代码：javascript
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
        <script type="text/javascript" src="js/Centerm.js" ></script>
        <link rel="stylesheet" href="css/Centerm.css" />
        <title>分页</title>
        <style>
            .table-part{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="table-part">
            <div class="table_head">
                <ul class="list-head list">
                    <li class="choose-man choose-all">选择</li>
                    <li class="man-name">姓名</li>
                    <li class="man-email">邮箱</li>
                    <li class="man-position">职位</li>
                    <li class="man-branch">所属部门</li>
                </ul>
            </div>
            <div class="table_body"></div>
            
            <div class="page"></div>
        </div>
        <script>
            $(function(){
                // 模拟了从数据库中返回的Json数据
                var user = [{"id":1,"account":"yangyan@163.com","name":"啦啦啦","password":"6223A9E9F170AD4AC5FCDBD748020B72E9CCBC30877F929C9C6A0D7F","status":2,"deptId":1,"grade":1,"department":{"dId":1,"level":0,"dName":"升腾智能研发中心","pid":null}},{"id":17,"account":"111@test.com","name":"111","password":"F20941E2CEAAFF0AEE7B48500E7B85472155FFDF2E72DB9075CEBB8E","status":2,"deptId":1,"grade":1,"department":{"dId":1,"level":0,"dName":"升腾智能研发中心","pid":null}},{"id":18,"account":"122@test.com","name":"122","password":"5BE1612EAA0D56FDE474AE057E4E8270067DD57CD7ADEFAA92271B70","status":2,"deptId":1,"grade":1,"department":{"dId":1,"level":0,"dName":"升腾智能研发中心","pid":null}},{"id":4,"account":"yjz@test.com","name":"yjz","password":"A59E1F262DED280DC434CE1244B3E8D1D1434A7C751316D087EF5FE6","status":2,"deptId":101,"grade":2,"department":{"dId":101,"level":1,"dName":"产品经理组","pid":1}},{"id":8,"account":"22@test.com","name":"22","password":"318B0D08889C7C3C4382065FF1DCF79DAE78AC466DDC683D92236C6B","status":2,"deptId":10207,"grade":2,"department":{"dId":10207,"level":2,"dName":"深圳研究中心","pid":102}},{"id":7,"account":"11@test.com","name":"11","password":"FECB6EFE632F3451D8E7C462A33EB57386CDDC9D602C6192BE18D941","status":2,"deptId":10301,"grade":2,"department":{"dId":10301,"level":2,"dName":"软件-接口应用部","pid":103}},{"id":2,"account":"yy@test.com","name":"哦哦哦","password":"8C20AEF91678539D184392500AD135839355F4B61C9D10566BE06658","status":2,"deptId":10201,"grade":3,"department":{"dId":10201,"level":2,"dName":"PC组","pid":102}},{"id":6,"account":"y@test.com","name":"olabala","password":"CB6CF3CE0118CE422B712B6FF95B6ADAAA3345844B9D5DD2E240A60C","status":2,"deptId":10201,"grade":3,"department":{"dId":10201,"level":2,"dName":"PC组","pid":102}},{"id":3,"account":"test@163.com","name":"test","password":"B16006741243AB13CE87E50E96E1BAAE291252523E7A7439771AF814","status":2,"deptId":10202,"grade":3,"department":{"dId":10202,"level":2,"dName":"认证研究组","pid":102}},{"id":9,"account":"33@test.com","name":"33","password":"0D636329AA7B169155B58A8018746D477D3A5DD629775D749A275E79","status":2,"deptId":10206,"grade":3,"department":{"dId":10206,"level":2,"dName":"供应商管理组","pid":102}},{"id":5,"account":"aaa@153.com","name":"yyy","password":"A8D912D74516037EAF00C0B36F0F41B3CF654FB663C1B636325725D2","status":2,"deptId":10206,"grade":3,"department":{"dId":10206,"level":2,"dName":"供应商管理组","pid":102}},{"id":14,"account":"88@test.com","name":"88","password":"D10695CCBD2D39D5F5A69475E0DA802009E3C24E638C696CD94DF54C","status":2,"deptId":10301,"grade":3,"department":{"dId":10301,"level":2,"dName":"软件-接口应用部","pid":103}},{"id":13,"account":"77@test.com","name":"77","password":"CD97FC8794E0AAB9ADEB0354DC2929257A56A4DA5CA7E0042506E3C1","status":2,"deptId":10303,"grade":3,"department":{"dId":10303,"level":2,"dName":"技术研究部","pid":103}},{"id":12,"account":"66@test.com","name":"66","password":"64D2D97D56AB295C55C6C1B48B826E8551AB5990C83AD8935AD4416F","status":2,"deptId":10401,"grade":3,"department":{"dId":10401,"level":2,"dName":"软件-业务应用部","pid":104}},{"id":11,"account":"55@test.com","name":"55","password":"6D8149E9B7C3BC3590A1D713270D224697A23BB501D4B5087F83D307","status":2,"deptId":10402,"grade":3,"department":{"dId":10402,"level":2,"dName":"软件-应用系统部","pid":104}},{"id":10,"account":"44@test.com","name":"44","password":"EDF05F312C733EC469878AF8DE4E8326D38A50073F48FFC24A8E8501","status":2,"deptId":10403,"grade":3,"department":{"dId":10403,"level":2,"dName":"质量管理部","pid":104}}];
                var userList = renderUserData(user);
                
                var Count = userList.length; //记录条数  
                var PageSize=10; //设置每页示数目  
                var PageCount=Math.ceil(Count/PageSize); //计算总页数  
                var currentPage =1; //当前页，默认为1
                
                if(PageCount > 1){
                    $('.page').show();
                    var pageHtml = '<a href="javascript:;" class="disable prev"><</a> '
                    
                    for(var j=1;j<=PageCount;j++){
                        if(currentPage == j){
                            pageHtml += '<a href="javascript:;" class="current">'+j+'</a>'
                        } else {
                            pageHtml += '<a href="javascript:;">'+j+'</a>'
                        }
                    }
                    pageHtml += '<a href="javascript:;" class="next">></a>';
                    $('.page').empty().append(pageHtml)
                } else {
                    $('.page').hide();
                }
                
                //默认显示第一页
                renderPage($('.table_body'),userList,currentPage,PageSize);
                
                $('.page').on('click','a:not(.next):not(.prev)',function(){
                    currentPage = $(this).text();
                    $(".current").removeClass("current");
                    $(this).addClass("current");
                
                    disabledPageBtn();
                    
                    renderPage($('.table_body'),userList,currentPage,PageSize);
                })
                
                $('.page').on('click','.next:not(.disable)',function(){
                    currentPage += 1;
                    $(".current").removeClass("current").next('a:not(.next)').addClass('current');
                    
                    disabledPageBtn();
                    
                    renderPage($('.table_body'),userList,currentPage,PageSize);
                })
                
                $('.page').on('click','.prev:not(.disable)',function(){
                    currentPage -= 1;
                    $(".current").removeClass("current").prev('a:not(.prev)').addClass('current');
                    
                    disabledPageBtn();
                    
                    renderPage($('.table_body'),userList,currentPage,PageSize);
                })
            })
            // 将json数据拼接成html数组
            function renderUserData(data) {
                var pageData=[]; 
                if (data.length !== 0) {
                    for (let i = 0; i<data.length; i++) {
                        var jobPos = getPos(data[i].grade);
                        var dataHtml = '<ul class="list-content list">'
                                    +'<li class="choose-man">'
                                    +'<input name="select-items" type="checkbox" />'
                                    +'<input name="userId" class="userId" type="hidden" value="'+data[i].id+'"/>'
                                    +'</li>'
                                    +'<li class="man-name">'+data[i].name+'</li>'
                                    +'<li class="man-email email-type">'+data[i].account+'</li>'
                                    +'<li class="man-position">'+jobPos+'</li>'
                                    +'<li class="man-branch">'+data[i].department.dName+'</li>'
                                +'</ul>';
                        pageData.push(dataHtml);
                    }
                } else {
                    var dataHtml = '<div class="full-page">该部门下暂时尚未员工！！！</div>';
                    pageData.push(dataHtml);
                }
                return pageData;
            }
            
            function getPos(grade){
                if(grade === 1) {
                    return "管理员";
                } else if(grade === 2){
                    return "主管";
                } else {
                    return "普通员工";
                }
            }
            // 渲染每页内容
            function renderPage(obj,data,currentPage,PageSize){
                obj.empty();
                for(var i=(currentPage-1)*PageSize;i<PageSize*currentPage;i++){    
                    obj.append(data[i]);  
                } 
            }
            // 判断上页、下页按钮是否可用
            function disabledPageBtn(){
                // 上页
                if($('.current').prev('a').hasClass('prev')){
                    $(".prev").addClass("disable");
                } else {
                    $(".prev").removeClass("disable");
                }
                
                //下页
                if($('.current').next('a').hasClass('next')){
                    $(".next").addClass("disable");
                } else {
                    $(".next").removeClass("disable");
                }
            }
            
        </script>
    </body>
</html>
没投入太多时间去完善这个代码，不过若是仅仅是基本的需求的话（切记数据量不要太大，若是数据量很大我猜是会至关耗资源），以上代码就足够用了。css
效果：html