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

最新推荐文章于 2023-05-05 09:28:56 发布
最新推荐文章于 2023-05-05 09:28:56 发布
阅读量2k 收藏 1
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunny_810/article/details/53739209
版权
首先按照设计图写出页面

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


注：
以上两种思路，一种是发送请求，一种是跳转页面
两种方式的采用可以看业务需求  但是 注意： 不要混在一起用即可。


 









木偶小小
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
amis（crud组件后台拼接展示+分页效果）
weixin_48133875的博客
05-11 930
【代码】amis（crud组件后台拼接展示+分页效果）
amis组件学习的配置介绍(二)
小王的技术库
12-31 4465
默认是通过,拼接选中的值。如果设置false，那么它将整个options-item作为值传入数组。如果只想提取 value，需要加上。, 配置全选按钮。delimiter: 设置多选时，分割值的分隔符。: 通过输入的内容请求匹配到的内容（模糊匹配）。支持的组件：Text、Select、Chained-Select、TreeSelect、Condition-Builder整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
amis框架对应格式
qq_44527508的博客
04-10 493
"autoGenerateFilter": true 开启查询区域，会根据列元素的 searchable 属性值，自动生成查询条件表单，只有 searchable 属性值为合法的组件 Schema 时才会生成查询条件。注意这个属性和 filter 冲突，开启 filter 后 autoGenerateFilter 将会失效。
vue 分页器
m0_61582318的博客
10-18 862
vue 分页器 ！！！ 写到这里VUE进行分页的功能就可以实现啦！
el-pagination 大数据量假分页，不允许直接到最大页数
MFWSCQ的博客
07-29 1254
前端控制分页自增长
jQuery EasyUI API 中文文档 - Pagination分页
10-28
jQuery EasyUI 是一款基于 jQuery 的前端开发框架，用于构建用户界面。它提供了许多方便的组件，如对话框、表格...在实际应用中，jQuery EasyUI 的 `Pagination` 分页组件能够极大地提升网页的用户体验和数据管理效率。
paginationjs分页器案例
最新发布
05-21
3. **前端分页** - 在网页应用中，前端分页是指在浏览器端完成数据的分页展示，而不是依赖服务器端进行数据切割。这种方式减少了服务器的负载，但可能不适合数据量非常大的场景，因为所有数据都需要一次性加载到...
Angular ui.bootstrap.pagination分页
08-31
在本文中，我们将深入探讨Angular框架中的ui.bootstrap.pagination模块，这是一个用于实现分页功能的库，它是Angular UI Bootstrap的一...在实际应用中，开发者可以根据需求调整分页的样式和行为，以满足各种项目需求。
swiper自定义分页器——时间轴
09-11
在本文中，我们将深入探讨如何使用Swiper这个流行的JavaScript滑动插件来自定义分页器，特别是将其设计成时间轴的样式。Swiper是一个强大的触摸滑动库，广泛应用于网页和移动应用中，用于创建幻灯片、产品滑块和其他...
jQuery Pagination分页插件.zip
07-11
在实际应用中，jQuery Pagination通常会结合Ajax请求，动态从服务器获取不同页的数据。例如，你可以将`onPageClick`回调中的数据请求部分改写为： ```javascript $.ajax({ url: 'api/data?page=' + pageNumber, ...
Swiper 中常见的属性以及方法
qq_69282350的博客
11-03 5115
*mySwiper.autoplay.stop() mySwiper.autoplay.start()**一个开始轮播，一个暂停轮播，不多说，那个mySwiper应该是可以修改的，名字是你初始化的swiper名字。**disableOnInteraction: ** 在设置false时，你对轮博图操作不会停止循环，而 true，在你对轮博图操作时会停止自动轮播。**renderBullet: ** 设置了这个属性你就可以设置自己的分页器样式，该属性是一个函数类型，参数是下标索引和类名。
swiper中swiper-pagination中的位置怎么设置
LlanyW的专栏
03-14 2894
我期望效果是让导航靠右下角。原css配置样式写死了left:0,所有只要把left：0冲掉，然后让导航在右边就可。可以配置clickableClass这个属性，属性值指定的是你自定义的class类名。然后在css中定义.my-pagination-clickable。期望swiper-pagination 导航靠右下角。
DEDECMS分页样式css代码
mole_story的博客
06-11 658
分页模板中的分页部分源码：&lt;div class="pagination-wrapper"&gt; &lt;div class="pagination"&gt; {dede:pagelist listsize='5' listitem='info,index,end,pre,next,pageno'/} &lt;/div&gt; &lt;/div&gt;样式一css代码如下：.paginati...
百度amis技巧汇总页
qq_40537083的博客
08-28 6338
一、amis类名使用技巧 amis本身会给各个dom节点添加类名，这个你可以通过浏览器审查功能查看，但一般不建议使用自有类名，因为amis其它各种组件都有可能有这个类名，这个时候你就可以通过自己额外添加自定义类名。额外添加类名具体方法就是通过配置className，如下图。 每个小的这种配置项组件几乎都可以通过这种方式加上类名，但要注意的是amis可能会在你额外加的类名上添加a-，这样上面的这个类名可能实际上是a-searchBoxA，同样具体详情你可以审查查看。 二、amis组件使用技巧 ..
织梦分页的几种样式代码
10-25 8625
分页代码1： &lt;div class="pagination-wrapper"&gt; &lt;div class="pagination"&gt; &lt;ul&gt;(可加可不加ul，根据自己需求) {dede:pagelist listsize='5' listitem='info,index,end,pre,next,pageno'/} &lt;/ul&gt...
pagination分页、页码组件（基于element ui组件库）
时光之痕
05-05 1789
基于element ui组件库的pagination分页、页码组件
Pagination分页组件在前端Vue与后端ssm使用
weixin_47354101的博客
01-01 2008
我分为两部分，讲解vue与ssm中的使用，先给大家看一下分页的效果 Vue前台 一、导入Pagination相关插件信息 1、导入Pagination组件(component) <template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="
如何使用Pagination+PageHelper实现分页？
WuHuaSen的博客
06-12 5038
目录一、分页的原理：1.1 分页的原理1.2 真假分页二、后端-PageHelper的使用：三、前端-Pagination的使用：四、分页中的细节：通过element-ui 的内置组件pagination实现分页，任何分页都有以下五个部分组成： pagination实际上是一个组件，组件里设置了分页常用到的参数，让pagination组件得到分页常用的参数值，这就能够实现分页了。 真分页：当你目前在首页的时候，点击“第二页”或“下一页”的时候，会重新向后端发送请求，请求第二页的数
pagination
qq_41091678的博客
10-20 2083
<template> <div class="pagination-container"> <el-pagination :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :page-sizes="pageSizes" :total="total" v-bind="$attrs" @size-change="handleSizeChange" @current-c
如何使用a-table中内置的pagination分页器
05-28
arco design vue组件库中的a-table组件内置了pagination分页器，可以通过以下步骤进行使用： 1. 在需要使用分页器的页面中引入Table组件： ``` <a-table :columns="columns" :data-source="dataSource" :...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值