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

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

Vue实现简单分页器

所有的分页器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:;" rel="external nofollow" class="jumpbtn" v-on:click="pageSkip()">跳转</a>
    </div>
   </div>

  </div>

 </body>
 <script src="/UploadFiles/2021-04-02/jquery-2.1.4.min.js">

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
vue,分页器

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“Vue实现简单分页器”

暂无“Vue实现简单分页器”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。