精华内容
下载资源
问答
  • 结合Vue使用的简单分页器

    千次阅读 2018-03-12 11:47:22
    提前说明:这原本是一个Jquery分页器,因为公司项目前后端不分离,以前的分页用的是基于.net的分页器。后来我引入了jquery分页器,在我掌握Vue之后,又自己写了一些基于Vue的插件(为什么不用成熟的Vue插件库,还是...

    提前说明:这原本是一个Jquery分页器,因为公司项目前后端不分离,以前的分页用的是基于.net的分页器。后来我引入了jquery分页器,在我掌握Vue之后,又自己写了一些基于Vue的插件(为什么不用成熟的Vue插件库,还是因为前后端没分离)但是前后端相对最开始的混杂已经算是分得很开了。

    分页器的样式是bootstrap风格的,是一个完全自定义样式的分页器,这意味着你可以很轻松把它改成你想要的样子(例子效果图如下)。
    这里写图片描述

    所有的分页器DEMO,都不会太简单,所以想要真正的掌握(支配)一款好用的分页插件,请务必耐心看下面的使用示例代码(本demo的下载地址,点击可以作为项目直接打开使用),另外也写了详细的注释并尽可能的保证简单好用。
    引用bootstrap(如果你希望是bootstrap风格)
    或者你完全可以自己写自己想要的风格!因为分页器的html结构是js生成的。
    需要引用的脚本文件有(资源均在文章底部下载包里)。
    按如下顺序引入:
    1.jQuery
    2.Vue
    3.jgPaginator.js

    贴代码,看注释:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>分页组件</title>
            <link rel="stylesheet" href="../../css/bootstrap.min.css">
    
            <style>
                html,
                body {
                    width: 100%;
                    height: 100%;
                }
    
                .page-container {
                    width: 1200px;
                    border: 1px solid #000;
                    margin: 50px auto 0 auto;
                    overflow: hidden;
                }
    
                .page-content{
                    margin: 50px 0;
                }
    
                /*jqPaginator分页控件样式*/   
                .hiddenPager {
                    visibility: hidden;
                }
    
                .jqPager {
                    position: relative;
                    width: 100%;
                    height: 40px;
                    padding: 25px 0;
                    background-color: #FFF;
                }
    
                .jqPager .pagination {
                    float: initial;
                    display: inline-block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    text-align: center;
                }
    
                .jqPager .pagination li {
                    display: inline-block;
                }
    
                .jqPager .pagination li a {
                    padding: 4px 10px;
                }
    
                /*跳页--选用功能*/
                .jumpBox {
                    position: absolute;
                    top: 0;
                    right: 105px;
                }
    
                .jumppage {
                    display: block;
                    width: 42px;
                    padding-left: 8px;
                    float: left;
                    height: 34px;
                    outline: none;
                }
    
                .jumpbtn {
                    float: left;
                    display: block;
                    height: 34px;
                    line-height: 34px;
                    margin-left: 5px;
                }
            </style>
    
        </head>
    
        <body>
    
            <div id="app" class="page-container">
                <!--页面该显示的内容-->
                <div class="page-content text-center">{{nova.text}}</div>
    
                <!--分页-->
                <div class="jqPager" v-bind:class="{hiddenPager:hiddenPager}">
                    <ul id="jqPager" class="pagination cf"></ul>
                    <!--没有跳页功能可以不要下面的jumpBox-->
                    <div class="jumpBox">
                        <input type="number" class="jumppage" id="jumpPageIndex" />
                        <a href="javascript:;" class="jumpbtn" v-on:click="pageSkip()">跳转</a>
                    </div>
                </div>
    
            </div>
    
        </body>
        <script src="jquery-2.1.4.min.js"></script>
        <script src="vue.js"></script>
        <script src="jqPaginator.js"></script>
        <script>
            //虚拟的数据来源
            var dataSource = [{
                    "text": "第一页数据,应该是一个数组,包含了pageSize条数据"
                }, {
                    "text": "第二页数据"
                }, {
                    "text": "第三页数据"
                },
                {
                    "text": "第四页数据"
                },
                {
                    "text": "第五页数据"
                },
                {
                    "text": "第六页数据"
                }
            ]
    
            //模拟后台返回的数据
            var backData = {
                Data: dataSource,//返回的数据
                totlaCount: 6,//搜索结果总数
                Success: true//请求接口是否成功
            };
    
            /*每一页显示的数据条数,按照约定传给后台,此例为1。
            需要加以说明的是这个实例你是看不出来这个参数的作用的,正如我返回数据中说的那样,后台给你返回的数据条数
            应该是一个有 -pagesize-条数据的数组才对*/
            var jqPageSize = 1; 
    
            var app = new Vue({
                el: "#app",
                data: {
                    //query是查询条件,这里就是当前页码和每一页该显示的数据条数
                    query: {
                        pageIndex: 1,
                        pageSize: jqPageSize
                    },
                    nova: [],
                    hiddenPager: true,//是否显示分页
                    totalCount: 0,//数据总条数,后台返回
                },
                methods: {
                    //初始化分页,通过更改生成的html结构(给其添加class或者改变返回的DOM)可以手动配置页器的显示效果。
                    initPager: function() {
                        $('#jqPager').jqPaginator({
                            visiblePages: 1,
                            currentPage: 1,
                            totalPages: 1,
                            first: '<li id="first"><a href="javascript:void(0);">首页</a></li>',
                            prev: '<li id="prev"><a href="javascript:void(0);">上一页 </a></li>',
                            next: '<li id="next"><a href="javascript:void(0);">下一页</a></li>',
                            last: '<li id="last"><a href="javascript:void(0);">尾页</a></li>',
                            page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
                        });
                    },
    
                    //获取数据并根据结果配置分页
                    getData: function() {
                        this.nova = backData.Data[this.query.pageIndex - 1];                    
                        this.totalCount = backData.Data.length;
                        this.hiddenPager = false;
    
                        //核心配置在此部,根据后台返回数据控制分页器该如何显示
                        //想要完全掌握这个分页器,你可以研究下jgPaginator.js源码,很容易修改。
                        $('#jqPager').jqPaginator('option', {
                            totalCounts: app.totalCount,//后台返回数据总数
                            pageSize: jqPageSize, //每一页显示多少条内容
                            currentPage: app.query.pageIndex, //现在的页码
                            visiblePages: 4, //最多显示几页
    
                            //翻页时触发的事件
                            onPageChange: function(num) {
                                //app.query.pageIndex = num;
                                app.pageChangeEvent(num);//调用翻页事件
                            }
                        });
                    },
                    //翻页或者跳页事件
                    pageChangeEvent: function(pageIndex) {
                        this.query.pageIndex = Number(pageIndex);
                        this.getData();
                    },
    
                    //跳页-选用功能,可有可无
                    pageSkip: function() {      
                        var maxPage = 1;//默认可以跳的最大页码                    
                        var targetPage = document.getElementById("jumpPageIndex").value;//目的页面                  
                        if(!targetPage) {
                            alert("请输入页码");
                            return;
                        }
    
                        //计算最大可跳页数
                        maxPage = Math.floor(this.totalCount / this.query.pageSize);                    
                        if(maxPage<1){
                            maxPage=1;
                        }
    
                        if(targetPage > maxPage) {
                            alert('超过最大页数了,当前最大页数是' + maxPage);
                            return;
                        }
                        this.pageChangeEvent(targetPage);
                    },          
                },
                //这一部分的定时器是为了此例方便加上的,初始化分页方法(initPager)要在获取数据之前执行就可以了
                mounted: function() {
                    this.initPager();
    
                    setTimeout(function() {
                        app.getData();
                    }, 50)
                }
    
            });
        </script>
    
    </html>

    以上就是分页的全部实现代码,想要完全掌握,只看DEMO肯定是不够的,所以这里是DEMO的下载地址,里面包含了所有需要引用的资源文件以及未压缩的分页器核心:jqPaginator.js。你需要好好看看它的源码!

    展开全文
  • Vue分页器踩坑

    2020-09-17 15:40:27
    分页器点击页码,内容跳转,页码不变 解决方案 <div v-if="pageshow"> // 外层包裹一个元素 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page....

    分页器点击页码,内容跳转,页码不变

    解决方案

          <div v-if="pageshow">  // 外层包裹一个元素
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page.sync="page"
                           :page-sizes="[2,5,10]"
                           :page-size="limit"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="list_total"
                           hide-on-single-page>
            </el-pagination>
          </div>
    
        handleCurrentChange (val) {
          this.page = val;
          this.getOrderList(val)
          this.pageshow = false;
          this.$nextTick(() => {
            this.pageshow = true
          })
        },
    
    展开全文
  • 分页器理解

    2008-06-02 23:34:00
    分页器用一个类封装起来,在这个分页器里面有五个属性:总记录数目,总页数,每一页需要显示的记录的数目,当前的页码,需要翻页时需要传递的参数;参数说明: 一:外部传入的属性参数值部分 (1):总记录数目totalCount (2):每...
    1. 分页器用一个类封装起来,在这个分页器里面有五个属性:总记录数目,总页数,每一页需要显示的记录的数目,当前的页码,需要翻页时需要传递的参数;
    2. 参数说明: 一:外部传入的属性参数值部分     (1):总记录数目totalCount (2):每页需要显示的记录数目:fetchSize   (3)最大页码:maxPage
    3. 需要计算的参数:算法 :  (totalCount-1)/fetchSize+1得到总共有多少页,然后我们需要使用Math.min(total,maxPage);得到比较小的那个数,然后把这个数值设置为总页数
    4. 开始行的提取:这个开始行设计成一个方法,没有定义属性.算法如下:首先我们需要保证的是总页数不超过允许显示的最大页数,然后开始行提取startRow=(toPage-1)*fetchSize,得出的结果刚刚好是下一页需要显示的记录的行号,然后需要判断当startRow大于total-1的时候,需要把总页数(totalPage-1)*fetchSize重新得到开始行,然后当开始行小于0时,需要把开始设置为从0开始,同时把当前页码toPage设置为1
    展开全文
  • DRF分页器源码分析

    2020-10-12 16:33:39
    一: 分析Paginator: 1: validate_num函数: 作用:校验number的合法性。 2:get_page函数: ...作用:获取分页总数 7:page_range函数: 作用: 获取一个可迭代对象,用于以后的遍历。 二:PageNumberPa

    一: 分析Paginator:

    1: validate_num函数:
    作用:校验number的合法性。
    在这里插入图片描述
    2:get_page函数:
    作用:将number变成一个合理的number。
    在这里插入图片描述
    3: page函数:
    作用:处理这页的开始和结束。
    在这里插入图片描述
    4:_get_page函数:
    作用:获取Pgae对象。
    在这里插入图片描述
    5:count函数:
    作用:获取所有页的对象总数:
    在这里插入图片描述
    6:num_pages函数:
    作用:获取分页总数
    在这里插入图片描述
    7:page_range函数:
    作用: 获取一个可迭代对象,用于以后的遍历。
    在这里插入图片描述

    二:PageNumberPagination分析:

    1: 必要参数:

    在这里插入图片描述
    2:paginate_queryset函数:
    作用:获取一页的list
    在这里插入图片描述

    3:get_paginated_response:
    作用: 指定响应的返回值格式:
    在这里插入图片描述

    4:get_page_size:
    作用:获取每页数量
    在这里插入图片描述

    展开全文
  • Swiper的分页器是靠mounted()挂载到Vue组件上而不是直接写在template里,所以在style scoped中写的样式无法作用分页器的点上。解决办法是把重写的样式写在scoped之外。(以下截图不完整,仅用做说明) template: ...
  • 因此,您当然可以在分页器作用域之前或之后链接任何其他条件。 基于可定制引擎的I18n感知帮助器 由于整个分页助手基本上只是链接和非链接的集合,因此Kaminari通过Engine内部的其自己的局部模板来呈现每个链接。 ...
  • element-ui 分页器失效问题处理

    千次阅读 2020-07-23 10:17:36
    分页器中页数显示 1条/页,但是表格中数据有5条。这个分页器失效了嘛? 代码奉上: <div class="pagination-container"> <el-pagination :current-page.sync="listQuery.page" :page-sizes="[1,20,30,50...
  • Vue项目中使用Swiper自定义分页器样式 可以直接设置css样式来实现 /*重置覆盖分页器的样式,注意css优先级问题*/ /deep/ .swiper-pagination-bullet { border-radius: 0; width: 97px; height: 6px; background-...
  • iview分页器删除后的坑 iview分页器删除最后一页数据怎样跳转上一页 假如数据有21条,你删除第21条,iview不会自动跳转到你的上一页,会在页面显示暂无数据,这时候我们就要看page是否传输正确的页码 直接上代码吧 ...
  • vue-awesome-swiper修改分页器颜色

    千次阅读 2020-04-03 08:46:41
    在vue-awesome-swiper组件API中没找到设置分页器颜色的属性,如果你找到了,欢迎在评论区留言,万分感谢! 下面说一下如何通过css自定义分页器样式: <template> <swiper :class="$style.content" ref=...
  • layui数据表格开启分页器不管用,page:true,如果直接请求数据渲染,开启分页器是无效,页面渲染了,但功能不上效,通过data:data渲染数据,limit设置初始每页数据数。
  • 文章目录url控制解析器全局使用局部使用响应器全局使用局部使用版本控制全局使用分页器常规分页偏移分页cursor游标方式 url控制 基本路由写法: url(r'^publish/', views.PublishView.as_view()), 第二种写法(只要...
  • 先来个图瞅瞅分页器是个什么鬼叭 就目前来讲,这应该算是功能最全的分页器啦吧 下面我们一步一步研究一下这玩意怎么玩叭 啥也不说了,先去element-ui嫖代码吧哈哈哈 <el-pagination @size-change=...
  • 最近在尝试用nuxtjs来搭建新的站点,但是平时在jquery里面用惯的一些...Swiper的分页器是靠mounted()挂载到Vue组件上而不是直接写在template里,所以在style scoped中写的样式无法作用分页器的点上。解决办法是...
  • 解决使用vue-awesome-swiper组件分页器pagination样式设置失效问题
  • hideOnSinglePage: true,true是隐藏 添加hideOnSinglePage,只有一页的分页被隐藏掉
  • vue中使用swiper并自定义分页器样式

    千次阅读 2019-07-26 15:02:13
    i++) { //判断哪个分页器此刻应该被激活 if (i == current - 1) { customPaginationHtml += ''; } else { customPaginationHtml += ''; } } return ''+customPaginationHtml+''; } } }); } } }; 以上转载自:...
  • 适用于iOS的简单视图分页器,其作用类似于android的viewPager。 与iOS 8.0或更高版本兼容。 在所有界面方向上都支持iPhone和iPad。 目录 预习 iPhone界面: iPad介面: 优点 同时支持Swift(v2.2和v3.0)和...
  • Hbase分页过滤

    2018-07-27 09:04:44
    常规的filterlist使用多个过滤会导致有些过滤不起作用 解决方法: 1、获取需要分页的所有rowkey数目,存储在list中,通过pageindex和pagesize计算出起始rowkey 2、借鉴文章中的分页方法,使用起始rowkey的...
  • Django第七天(admin,分页器,)

    千次阅读 2018-06-27 17:05:06
    二:分页器  1.Paginator对象的常用方法与属性 page(页码)方法:根据页码返回当前页在数据库中对应的数据,返回的对象是page对象 num_pages属性:总页数 page_range:所有页码返回  2.Page对象的常用方法: 注意:...
  • 分页器不显示的问题,并没有解决,我是降低了版本。因为我看最新版本是近半个月才升级,swiper的官网api尚不完善,再加上项目并非一定要使用最新版本,所以就降低了版本。 降低后: vue-awesome-swiper v3.1.3 ...
  • 分页原理

    千次阅读 2021-01-19 11:37:30
    自定义分页器
  • MyBatis拦截实现分页

    千次阅读 2018-01-04 16:12:36
    拦截作用就是拦截某些方法的调用,我们可以在方法执行前后为方法加上某些逻辑,也可以只执行拦截的逻辑代码而不执行被拦截的方法。Mybatis拦截设计的一个初衷就是为了供用户在某些时候可以实现自己的逻辑而...
  • 本文实例讲述了easyUI使用分页过滤对数据进行分页操作。分享给大家供大家参考,具体如下: 在后台管理系统中,由于数据量的庞大,我们经常需要用到easyui框架的分页工具。在本文章中,使用了分页过滤进行分页的...
  • 最近用Vue做项目需要加个轮播效果,结果分页器死活出不来,但轮播效果和前进后退箭头以及滚动栏都是正常显示的。 基础代码如下: <div class="swiper-container"> <div class="swiper-wrapper"> <...
  • mybatis 分页详解、mybatis分页查询,mybatis分页拦截使用、struts2下mybatis分页   mybatis默认是支持分页的,内部通过创建可滚动的ResultSet(ResultSet.TYPE_FORWARD_ONLY)对结果集指针进行跳转以达到分页...
  • 第一个坑: vue中用swiper,swiper数据需动态渲染,那么也会出现标题的情况,不能拖动 附代码如下: <div id="app"> <...div class="swiper-slide" v-for="(item,index) in list">...img
  • 主要介绍了解决MybatisPlus插件分页查询不起作用总是查询全部数据问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • Mybatis拦截介绍及分页插件

    万次阅读 2014-11-03 10:28:00
    Mybatis拦截介绍及分页插件 1.1 目录 ... 拦截的一个作用就是我们可以拦截某些方法的调用,我们可以选择在这些被拦截的方法执行前后加上某些逻辑,也可以在执行这些被拦截的方法时执行自己的逻

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 71,558
精华内容 28,623
关键字:

分页器的作用