前端實現一個簡單的表格分頁

原創

2020-02-20 23:39

實現原理與幻燈類似，不過要注意聯動時體驗要好。

html結構：

<table class="ad_list ad_link">
            <colgroup class="colgroup1"></colgroup>
            <colgroup class="colgroup2"></colgroup>
            <colgroup class="colgroup3"></colgroup>
            <colgroup class="colgroup4"></colgroup>
            <colgroup class="colgroup5"></colgroup>
            <colgroup class="colgroup6"></colgroup>
            <tr><th>分會賬號</th><th>名稱</th><th>充值總額</th><th>充值次數</th><th>註冊人數</th><th>註冊IP數</th><th>日期</th></tr>
        </table>
        <div class="income_box" id="income_box">
        <table class="ad_list ad_link income_table" id="income_table">
            <colgroup class="colgroup1"></colgroup>
            <colgroup class="colgroup2"></colgroup>
            <colgroup class="colgroup3"></colgroup>
            <colgroup class="colgroup4"></colgroup>
            <colgroup class="colgroup5"></colgroup>
            <colgroup class="colgroup6"></colgroup>
            <tr><td>abcxd1</td><td>是對方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
            <tr><td>abcxd2</td><td>是對方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
            <tr><td>abcxd3</td><td>是對方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
            <tr><td>abcxd4</td><td>是對方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
             ...    
        </table>
        </div>
        <div class="pptv_pages" id="pages_box">
            <div class="pptv_pages">
                <span></span>
                <span></span>
                <span><a href="javascript:void(0);" class="prev">上一頁</a></span>
                <div class="pages">
                    <div class="inner_pages J_pages"></div>
                </div>
                <span><a href="javascript:void(0);" class="next">下一頁</a></span>
                <div>
                    <select id="select_pages"></select>
                </div>
            </div>
        </div>

css樣式：

.income_box{max-height: 581px;min-height:30px;_height:581px;height:581px;overflow: hidden;position: relative;margin:0 auto;width:795px;}
.colgroup1,.colgroup2{width:15%;}
.colgroup3,.colgroup4,.colgroup5,.colgroup6{width:14%;}
.income_table{position: absolute;top:0;left:0;}
.pptv_pages .pages{display:inline-block;top:20px;padding:4px 0;height:38px;overflow: hidden;position: relative;}
.pptv_pages .inner_pages{display:inline-block;position: absolute;top:12px;left:0;height: 38px;}

js部分：（用jquery實現）

var $income_box=$('#income_box'),//表格盒區域
                    $income_table=$('#income_table');//統計表格
                var _height=$income_box.height(),//翻頁高度
                    trLen=$income_table.find('tr').length,//總記錄條數
                    perPage=20,//每頁顯示行數
                    _left=29;//頁碼移動距離
                var countPage=Math.ceil(trLen/perPage);//總頁數
                var  page=1;//起始頁
                //分頁區
                var $pages_box=$('#pages_box');
                var $select_pages=$('#select_pages');
                var $inner_pages=$pages_box.find('.J_pages');
                $pages_box.find('span').eq(0).text('共'+trLen+'條');//條數
                $pages_box.find('span').eq(1).text(page+'/'+countPage+'頁');//頁數
                var aPages=['<a href="javascript:void(0);" class="current">1</a>'];
                var optionPages=['<option value="1" selected="selected">第1頁</option>'];
                for(var i=2;i<=countPage;i++){
                    aPages.push('<a href="javascript:void(0);">' + i + '</a>');
                    optionPages.push('<option value="'+i+'">第' + i + '頁</option>');
                }
                $inner_pages.append(aPages.join(''));
                $select_pages.append(optionPages.join(''));

                if(countPage<=5){//總頁數小於5頁
                    $pages_box.find('.pages').width(29*countPage);
                }else{
                    $pages_box.find('.pages').width(145);
                }
                //點擊某一頁
                $inner_pages.find('a').off().on('click',function(e){
                    if(!$income_table.is(":animated")){
                        $(this).addClass('current').siblings().removeClass('current');
                        var index=$(this).index();
                        page=index+1;
                        //表格移動
                        $income_table.stop().animate({'top': -1*(_height*index) +"px"},800);
                        $select_pages.val(index+1);
                        $pages_box.find('span').eq(1).text(index+1+'/'+countPage+'頁');//頁數
                        if(countPage>5){
                            if(page>3 && page<countPage-1){
                                $inner_pages.stop().animate({'left': -1*(_left*(page-3)) +"px"},800);
                            }
                            if(page==1 || page==2 || page==3){
                                $inner_pages.stop().animate({'left': 0 +"px"},800);
                            }
                            if(page==countPage || page==countPage-1 || page==countPage-2){
                                $inner_pages.stop().animate({'left': -1*(_left*(countPage-5)) +"px"},800);
                            }
                        }
                    }
                });

                //點擊下拉頁中的某一頁
                $select_pages.on('change',function(e){
                    if(!$income_table.is(":animated")){
                        var index=parseInt($(this).val());
                        page=index;
                        $inner_pages.find('a').eq(index-1).addClass('current').siblings().removeClass('current');
                        //表格移動
                        $income_table.stop().animate({'top': -1*(_height*(index-1)) +"px"},800);
                        $pages_box.find('span').eq(1).text(index+'/'+countPage+'頁');//頁數
                        if(countPage>5){
                            if(page>3 && page<countPage-1){
                                $inner_pages.stop().animate({'left': -1*(_left*(page-3)) +"px"},800);
                            }
                            if(page==1 || page==2 || page==3){
                                $inner_pages.stop().animate({'left': 0 +"px"},800);
                            }
                            if(page==countPage || page==countPage-1 || page==countPage-2){
                                $inner_pages.stop().animate({'left': -1*(_left*(countPage-5)) +"px"},800);
                            }
                        }

                    }

                });

                //上一頁
                $pages_box.find('.prev').off().on('click',function(e){
                    if(!$income_table.is(":animated")){
                        if(page == 1){
                            $income_table.stop();
                            $inner_pages.stop();
                        }else{
                            $income_table.animate({'top' : "+=" + _height +"px"},800);
                            if(countPage>5){
                                if(page>3 && page<countPage-1){
                                    $inner_pages.animate({'left' : "+=" + _left +"px"},800);
                                }
                                if(page==1 || page==2 || page==3){
                                    $inner_pages.stop().animate({'left': 0 +"px"},800);
                                }
                                if(page==countPage || page==countPage-1){
                                    $inner_pages.stop().animate({'left': -1*(_left*(countPage-5)) +"px"},800);
                                }
                            }

                            page--;
                            $inner_pages.find('a').eq(page-1).addClass('current').siblings().removeClass('current');
                            $select_pages.val(page);
                            $pages_box.find('span').eq(1).text(page+'/'+countPage+'頁');//頁數

                        }
                    }

                });
                //下一頁
                $pages_box.find('.next').off().on('click',function(e){
                    if(!$income_table.is(":animated")){
                        if(page == countPage ){
                            $income_table.stop();
                            $inner_pages.stop();
                        }else{
                            $income_table.animate({'top' : "-=" + _height +"px"},800);
                            if(countPage>5){
                                if(page>=3 && page<countPage-1){
                                    $inner_pages.animate({'left' : "-=" + _left +"px"},800);
                                }
                                if(page==1 || page==2){
                                    $inner_pages.stop().animate({'left': 0 +"px"},800);
                                }
                                if(page==countPage || page==countPage-1 ||page==countPage-2){
                                    $inner_pages.stop().animate({'left': -1*(_left*(countPage-5)) +"px"},800);
                                }
                            }
                            page++;
                            $inner_pages.find('a').eq(page-1).addClass('current').siblings().removeClass('current');
                            $select_pages.val(page);
                            $pages_box.find('span').eq(1).text(page+'/'+countPage+'頁');//頁數
                        }
                    }

                });

實現效果：