前端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
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。