pagination 分页器在实际工作中的运用

首先按照设计图写出页面

html代码

  <div class="pagination-wrapper">
                    <a href="javascript:;" class="prev">上一页</a> 
                    <a href="javascript:;" class="next">下一页</a> 
                    <label>
                        <span>跳转至</span>
                        <input type="text" name="page" value="1">
                        <a href="javascript:;" class="btn"> Go </a> 
                    </label>
                    共<span class="total right"></span>页    
                </div>

样式代码

//分页器
    .pagination-wrapper {
        margin: 65/@REM auto 145/@REM;
        text-align: Center;
        font-size: 16/@REM;
        height: 35/@REM;
        line-height: 35/@REM;
        .disable {
            color: #ccc;
        }
        a {
            display: inline-block;
            padding: 0 5/@REM;
            color: #a96300;
            margin-right: 5/@REM;
            &.btn {
                padding: 0 10/@REM;
                color: #fff;
                font-size: 20/@REM;
                background: #ffb700;
                .border-radius(5/@REM);
                &:hover {
                    .opacity(0.8);
                }
            }
        }
        input {
            display: inline-block;
            font-size: 20/@REM;
            border: 1/@REM solid #dbdbdb;
            padding: 0 1%;
            text-align: center;
            width: 5%;
            color: #a96300;
        }
    }

最终样式如图

路由地址：

Route::get('/mobile/vote/draw-competition', function() {  
    $pageData = getGeneralPageData();     
    $pageData['apis'] = [
        //搜索框
        'searchVoteUserList' => '/api/get-exhibitions',
        //排行榜   
        'getActivityVoteRankList' => '/api/studioVote/getStudioVoteRankList',
        //投票
        'activityVoting' => '/api/vote',
        //优秀作品展示
        'getGoodWorkList' => '/api/get-exhibitions',
        //上传作品
        'uploadActivityVote' => '/api/get-exhibitions2',
        //搜索接口 
        'searchTutorGardenList' => '/api/search-garden',
        //报名接口  
        'applyActivity'   => '/api/vote-apply-studio' 
        //左边的是applyActivity是与后台约定好的接口 是后台提供的
        //=>指向的"/api这是前端测试用的 可以自己定义 随便写
   
    ];  
    return view('mobile.vote.draw-competition.index', $pageData);
});

模板页面引入APIS

@section('resources') 
    @script()
        var KEY_TOKEN = '{{ csrf_token() }}';
        var APIS =  {!! json_encode($apis, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!};
        
        require('./index.js');
    @endscript()
@stop

分页的请求地址 就是

  //优秀作品展示
 'getGoodWorkList' => '/api/get-exhibitions'

请求的测试数据

$router->post('/api/get-exhibitions', function(){
    return Response::json([
        "meta" => [
            "code" => 0,
            "msg" => "成功"
        ],
        "data" => [
            "total" => 125,   //总数
            "per_page" => 8,  //每页显示数目
            "current_page" => 1, //当前页数
            "last_page" => 1, //最后一页页数
            "next_page_url" => null, //下一页链接
            "prev_page_url" => null, //上一页链接
            "from" => 1, //当前从第几条数据
            "to" => 5, //到第几条数据
            "data" => [
                [
                    "id" => 1,
                    "name" => "学生1",
                    "tutorGardenName" => "所属1",
                    "tutorGardenHref" => "http://qmin91.com/",
                    "rank" => 12,
                    "imageData" => [
                    ],
                    "vote_sum" => 4
                ], [
                    "id" => 2,
                    "name" => "学生2",
                    "tutorGardenName" => "所属2",
                    "tutorGardenHref" => "",
                    "rank" => 12,
                    "imageData" => [  
                    ],
                    "vote_sum" => 4
                ], [
                    "id" => 3,
                    "name" => "学生3",
                    "tutorGardenName" => "所属3",
                    "tutorGardenHref" => "http://qmin91.com/",
                    "rank" => 12,
                    "imageData" => [  
                    ],
                    "vote_sum" => 4
                ], [
                    "id" => 4,
                    "name" => "学生4",
                    "tutorGardenName" => "所属4",
                    "tutorGardenHref" => "http://qmin91.com/",
                    "rank" => 12,
                    "imageData" => [  
                    ],
                    "vote_sum" => 4
                ], [
                    "id" => 5,
                    "name" => "学生5",
                    "tutorGardenName" => "所属5",
                    "tutorGardenHref" => "http://qmin91.com/",
                    "rank" => 12,
                    "imageData" => [ 
                    ],
                    "vote_sum" => 4
                ], [
                    "id" => 6,
                    "name" => "学生6",
                    "tutorGardenName" => "所属6",
                    "tutorGardenHref" => "http://qmin91.com/",
                    "rank" => 12,
                    "imageData" => [  
                    ],
                    "vote_sum" => 4
                ], [
                    "id" => 7,
                    "name" => "学生7",
                    "tutorGardenName" => "所属7",
                    "tutorGardenHref" => "http://qmin91.com/",
                    "rank" => 12,
                    "imageData" => [
                    ],
                    "vote_sum" => 4
                ], [
                    "id" => 8,
                    "name" => "学生8",
                    "tutorGardenName" => "所属8",
                    "tutorGardenHref" => "http://qmin91.com/",
                    "rank" => 12,
                    "imageData" => [    
                    ],
                    "vote_sum" => 4
                ]
            ]
        ]
    ]);
});  

接着就是可以编写脚本了

有两种实现方式：

一种是 ： 点击一页就发一个ajax请求，然后把当前的页码发给后端

另一种： 刷新页面 在上一页 下一页的链接当中用 后端返回的数据

这里采用第一种   点击一页就发一个ajax请求，然后把当前的页码发给后端

一页显示8条数据，

默认页面上已经发送了一次请求，获取了第一页的数据，显示在页面上

返回的数据

请求的数据

这时 可以看到后端返回的数据当中有 current_page 和 total

input输入框 里显示的就应该是 currentPage的值      1

共xx页 就是 后台返回的 total / 8 (8是每页要显示的多少条数据)

125 / 8 向上取整数 得到 16   就把16 放在共xx页里     即 共 16 页

然后每次点击的时候  或者点击跳转到第几页的时候  都要更新current_page 

 //分页器
    var $pagination = $('.pagination-wrapper');
    var $pageBtn = $pagination.find('.btn');
    var $input = $pagination.find('input[name="page"]');
    var $total = $pagination.find('.total');
    //当前值
    var currentPage = 1, total;
    total = $total.text();
    //分页功能
    $pageBtn.on('click', function (e) {
        e.stopPropagation();
        if (currentPage == parseInt($(this).val())) {
            return;
        }
        var page = $input.val();
        initWorkPanel($workWrap, page);
    });
    $input.on('input  propertychange ', function () {
        var val = parseInt($input.val());
        if (val < 1 || val > total) {
            alert('请输入有效范围的数值')
            return;
        }
    });
    $pagination.on('click', '.prev', function (e) {
        e.stopPropagation();
        var page = parseInt($input.val()) - 1;
        if (page < 1) {
            alert('没有上一页了');
            return;
        } else {
            $input.val(page);
            initWorkPanel($workWrap, page);
        }
    });
    $pagination.on('click', '.next', function (e) {
        e.stopPropagation();
        var page = parseInt($input.val()) + 1;
        if (page > total) {
            alert('没有下一页了');
            return;
        } else {
            $input.val(page);
            initWorkPanel($workWrap, page);
        }
    });

此时 当我点击下一页 就会发送请求 点一次 发一次 

上图当中的我点击了4下 “下一页”的按钮  发送了四个请求  (第一个请求是页面初始就有的)

并把page:4 pageSize:8发送给后端

 

从页实现分页

第二种思路就是

获取浏览器的地址  然后获取到page的值  刷新页面 跳转页面 不发送请求

上一页 下一页的标签当中的href 使用上一页 下一页的链接 点击跳转也是 刷新页面

此时的测试数据就与上一种不同了 

$router->post('/api/get-exhibitions', function(){
    return Response::json([
        "meta" => [
            "code" => 0,
            "msg" => "成功"
        ],
        "data" => [
            "total" => 33,   //总数
            "per_page" => 8,  //每页显示数目
            "current_page" => 1, //当前页数
            "last_page" => 1, //最后一页页数
            "next_page_url" => 'http://qmjy-fe.app/search?page=2', //下一页链接
            "prev_page_url" => null , //上一页链接
            "from" => 1, //当前从第几条数据
            "to" => 5, //到第几条数据
            "data" => [
                [
                    "id" => 1,
                    "name" => "学生1",
                    "tutorGardenName" => "所属1",
                    "tutorGardenHref" => "http://qmin91.com/",
                    "rank" => 12,
                    "imageData" => [
                    ],
                    "vote_sum" => 4
                ], [
                    "id" => 2,
                    "name" => "学生2",
                    "tutorGardenName" => "所属2",
                    "tutorGardenHref" => "",
                    "rank" => 12,
                    "imageData" => [  
                    ],
                    "vote_sum" => 4
                ]
            ]
        ]
    ]);
});  

total 总数比如是33
per_page 每页显示 8条  
current_page 当前在第1页
上面三条数据是必需的
last_page 末页 最后一页 33 / 8 = 4.125向上取整数 就是 5页 这里值就是 5
next_page_url 就是 url地址上的 current_page + 1的结果
//比如 
http://qmjy-fe.app/search?page=2
page=2的时候  
current_page 2
next_page_url http://qmjy-fe.app/search?page=3
prev_page_url http://qmjy-fe.app/search?page=1
当前页是第一页时   prev_page_url 值为null
当前页是末页时     next_page_url 值为null


from  to  是从第几条数据到第几条数据 是跟着current_page 不断变化的
比如第一页
显示了8条数据数据   
就是from 1 to 8
第二页显示了8条数据 
就是from  9 to 17
第三页显示了5条数据 
就是from 18 to 22

路由地址

 html模板页面

  @if($paginator->lastPage() > 1)
    <div class="pagination-wrapper">
        <div class="row-m">
            @include('widget.layout.desktop.pagination.pagination', ['page' => $paginator])
        </div>
    </div>
    @endif

引入 pagination组件

{!! str_replace('»', '<span class="next-button">下一页</span>' ,str_replace('«', '<span class="prev-button">上一页</span>', $page->render())) !!}
@script()
var pagination = require('pagination.js')
@endscript

样式文件

@import "/widget/m/variables.less";
@import "/widget/m/helpers.less";
.pagination {
    @height: 40px;
    //overflow: hidden;
    font-size: 0;
    text-align: center;
    display: block;
    height: 40px;
    position: relative;
    &, li {
        padding: 0;
        margin: 0;
        list-style: none;
        position: relative;
        z-index: 2;
    }
    li {
        margin: 0 2px;
        font-style: 0;
        color: #666;
        cursor: default;
        &, a, span {
            .inline-block-fix;
        }
        a, span {
            //line-height: 50px;
            font-size: 18px;
            line-height: @height + 3;
            height: @height;
            padding: 0 15px;
        }
    }
    li.disabled {
        color: #999;
    }
    li.active {
        font-weight: bold;
        span, a {
            color: @logo-color;
        }
    }
    .flag {
        position: absolute;
        left: -99999px;
        top: 100%;
        height: 2px;
        background: @logo-color;
        z-index: 0;
    }
}

最终显示如图

脚本

var $ = require('jquery');
var $pagination = $('.pagination');
if (!$pagination.length)  {
    return;
}
$pagination.each(function (index, el) {
    var $el = $(el);
    var $flag = $('<i class="flag"></i>');
    var $activeBtn = $el.find('.active');
    $el.append($flag);
    $el.data('$flag', $flag);
    $el.data('$activeBtn', $activeBtn);
});
$pagination.on('mouseenter', 'li', function () {
    var $el = $(this);
    if ($el.hasClass('disabled'))  {
        return;
    }
    flagMoveTo($el);
});
$pagination.on('mouseleave', 'li', function () {
    var $el = $(this);
    var $pag = $el.closest('.pagination');
    flagMoveTo($pag.data('$activeBtn'));
});
$pagination.on('click', 'li', function () {
    var $el = $(this);
    var $pag = $el.closest('.pagination');
    if ($el.hasClass('disabled'))  {
        return;
    }
    $pag.data('$activeBtn').removeClass('active');
    $pag.data('$activeBtn', $el);
    $el.addClass('active');
    flagMoveTo($activeBtn);
});
function flagMoveTo($target)  {
    var $pag = $target.closest('.pagination');
    $pag.data('$flag').stop().animate({
        width: $target.width(),
        left: $target.position().left + 3
    }, 200);
}
exports.focus = function ($target) {
    flagMoveTo($target);
};
flagMoveTo($pagination.find('.active'));
exports.prevPage = function() {
    window.location.href = $pagination.find('a[rel=prev]').attr('href');
}
exports.nextPage = function() {
    window.location.href = $pagination.find('a[rel=next]').attr('href');
}

实现的效果如点击到第5页的时候 就是刷新了页面

浏览器地址变成

http://qmjy-fe.app/search?page=5

可以在浏览器上方输入 http://qmjy-fe.app/search?page=10

就跳转到了第10页 同时没有发送请求

注：

以上两种思路，一种是发送请求，一种是跳转页面

两种方式的采用可以看业务需求  但是 注意： 不要混在一起用即可。