首先按照设计图写出页面
请求的数据
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模板页面
脚本
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=10
就跳转到了第10页 同时没有发送请求
注:
以上两种思路,一种是发送请求,一种是跳转页面
两种方式的采用可以看业务需求 但是 注意: 不要混在一起用即可。