pagination 分页器在实际工作中的运用 ---周总结-20161209

来源：互联网发布：关于编程的手机游戏编辑：程序博客网时间：2024/06/05 04:25

首先按照设计图写出页面

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页同时没有发送请求

注：

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

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

0 0