[关闭]
@15013890200 2018-08-13T16:10:39.000000Z 字数 6424 阅读 941

vue pagination 分页插件

vue javascript 插件

1 插件部分

1.1 template部分

  1. <template>
  2.     <div class="j_pagination_div clearfix" v-if="isShow">
  3.         <ul class="ul">
  4.             <li @click="toPage(1)" :class="{disabled:current <= 1}">首页</li>
  5.             <li @click="toPage(current-1)" :class="{disabled:current <= 1}"><</li>
  6.             <li :class="{selected:current == p}" v-for="p in pages" @click="toPage(p)">{{p}}</li>
  7.             <li @click="toPage(current+1)" :class="{disabled:current >= total_page}">></li>
  8.             <li @click="toPage(total_page)" :class="{disabled:current >= total_page}">尾页</li>
  9.         </ul>
  10.         <div class="j_select_div">
  11.             <input type="text" style="width: 0;height: 0;border: none;" v-on:focus="show" v-on:blur="hide">
  12.             <span class="j_selected_span" @click="showList($event)">{{selected_num}}条</span>
  13. 			<div class="j_pagenum_list" :class="{hide:!onSelect}">
  14. 				<span :class="{selected:pagenum == selected_num}" v-for="pagenum in j_pagenum_list" @click="selectNum(pagenum)">{{pagenum}}条</span>
  15. 			</div>
  16. 		</div>
  17. 		<div class="j_turn_div">
  18. 			<span class="j_turn_span">跳至</span>
  19. 			<input type="text" v-model="input_num" class="j_turn_input" v-on:keydown="listen($event)" v-on:blur="toPage(input_num)">
  20.             <span class="j_turn_total">/{{total_page}}页,共{{total}}条</span>
  21.             <span class="j_turn_btn">跳转</span>
  22.             <span class="total"></span>
  23.         </div>
  24.     </div>
  25. </template>

1.2 script部分

  1. <script>
  2.     export default{
  3.         name : 'pagination',
  4.         data(){
  5.             return{
  6.                 isShow:false,//是否显示分页插件
  7.                 total:0,//总条数
  8.                 pages:[1],//分页列表
  9.                 current:1,//当前页
  10.                 selected_num:20,//选择的分页大小
  11.                 j_pagenum_list:[10,20,50,100],//默认分页大小选择列表
  12.                 onSelect:false,//判断是否处于选择分页大小，控制隐藏选择列表
  13.                 input_num:null,//页码输入框
  14.                 total_page:0,//总页数
  15.                 show_pages:5,//中间展示页码条数
  16.             }
  17.         },
  18.         props:{
  19.             page:{
  20.                 type:Object,
  21.                 default:null
  22.             }
  23.         },
  24.         methods:{
  25.             init:function(){
  26.                 /* 初始化分页插件 */
  27.                 var t = this;
  28.                 if(this.page){
  29.                     if(this.page.total){
  30.                         this.isShow = true;
  31.                         this.total = this.page.total;
  32.                     }
  33.                     if(this.page.current){
  34.                         this.current = this.page.current;
  35.                     }
  36.                     if(this.page.size && this.page.size > 0){
  37.                         if(this.j_pagenum_list.indexOf(this.page.size) == -1){
  38.                             this.j_pagenum_list.push(this.page.size);
  39.                         }
  40.                         this.selected_num = this.page.size;
  41.                     }
  42.                     if(this.page.show_pages){
  43.                         if(this.page.show_pages > 10){
  44.                             this.show_pages = 10;
  45.                         }
  46.                         else if(this.page.show_pages < 3){
  47.                             this.show_pages = 3;
  48.                         }
  49.                         else
  50.                             this.show_pages = this.page.show_pages;
  51.                     }
  52.                 }
  53.                 this.total_page = Math.ceil(this.total/this.selected_num);
  54.                 if(this.current > this.total_page){
  55.                     this.current = 1;
  56.                 }
  57.                 this.calculatePages();
  58.             },
  59.             show:function(){
  60.                 var t = this;
  61.                 setTimeout(function(){
  62.                     t.onSelect = true;
  63.                 },100);
  64.             },
  65.             hide:function(){
  66.                 var t = this;
  67.                 setTimeout(function(){
  68.                     t.onSelect = false;
  69.                 },150);
  70.             },
  71.             showList:function(e){
  72.                 /* 显示分页大小选项 */
  73.                 e.target.parentNode.firstChild.focus();
  74.             },
  75.             selectNum:function(num){
  76.                 /* 选择分页大小 */
  77.                 this.selected_num = num;
  78.                 this.total_page = Math.ceil(this.total/this.selected_num);
  79.                 this.current = 1;
  80.                 this.input_num = 1;
  81.                 this.calculatePages();
  82.                 this.$emit('turn_page',this.current,this.selected_num);
  83.             },
  84.             calculatePages:function(){
  85.                 /* 计算分页显示数 */
  86.                 this.pages = [];
  87.                 if(this.total_page <= this.show_pages){
  88.                     for(var i = 1; i <= this.total_page; i++){
  89.                         this.pages.push(i);
  90.                     }
  91.                 }
  92.                 if(this.total_page > this.show_pages){
  93.                     var start = 0,end = 0;
  94.                     if(this.current <= this.show_pages - Math.floor(this.show_pages/2)){
  95.                         start = 1;
  96.                         end = this.show_pages;
  97.                     }
  98.                     else if(this.current >= this.total_page - Math.floor(this.show_pages/2)){
  99.                         start = this.total_page - this.show_pages +1;
  100.                         end = this.total_page;
  101.                     }
  102.                     else{
  103.                         if(Math.ceil(this.show_pages/2) !== Math.floor(this.show_pages/2)){
  104.                             start = this.current - Math.floor(this.show_pages/2);
  105.                             end = this.current + Math.floor(this.show_pages/2);
  106.                         }
  107.                         else{
  108.                             start = this.current - Math.floor(this.show_pages/2)+1;
  109.                             end = this.current + Math.floor(this.show_pages/2);
  110.                         }
  111.                     }
  112.                     for(var i = start; i <= end; i++){
  113.                         this.pages.push(i);
  114.                     }
  116.                 }
  117.             },
  118.             toPage:function(num){
  119.                 /* 跳转到指定页 */
  120.                 num = parseInt(num);
  121.                 if(num > 0 && num <= this.total_page && num != this.current){
  122.                     this.current = num;
  123.                     this.calculatePages();
  124.                     this.input_num = num;
  125.                     this.$emit('turn_page',this.current,this.selected_num);
  126.                 }
  127.                 else{
  128.                     this.input_num = this.current;
  129.                 }
  130.             },
  131.             listen:function(e){
  132.                 /* 监听文本框输入事件，enter跳转和只让输入数字 */
  133.                 var code = event.keyCode;
  134.                 if(code>=48 && code<=57 || code==8 || code>=96 && code<=105 || code==13){
  135.                     event.returnValue = true;
  136.                 }
  137.                 else {
  138.                     event.returnValue = false;
  139.                 }
  140.                 if(code == 13){
  141.                     this.toPage(parseInt(this.input_num));
  142.                 }
  143.             }
  144.         },
  145.         mounted(){
  146.             this.init();
  147.         },
  148.         watch: {
  149.             'page.total': function(){
  150.                 /* 监听数据变化重新初始化分页插件 */
  151.                 this.init();
  152.             }
  153.         }
  154.     }
  155. </script>

1.3 css部分

  1. <style scoped>
  2.     .j_pagination_div{font-size: 14px;font-family: '微软雅黑';user-select: none;float:left;}
  3.     .j_pagination_div .hide{display: none;}
  4.     .j_pagination_div .ul{float: left;margin: 0;padding: 0;}
  5.     .j_pagination_div .ul li{list-style: none;float: left;margin-right: 12px;border: 1px solid #dddddd;max-width: 60px;min-width: 45px;height: 30px;line-height: 30px;text-align: center;border-radius: 3px;cursor: pointer;}
  6.     .j_pagination_div .ul li.selected{background-color: #3896fe;color: #ffffff!important;border: 1px solid #3896fe;}
  7.     .j_pagination_div .ul li:hover{color: #3896fe;border: 1px solid #3896fe;}
  8.     .j_pagination_div .j_select_div{position: relative;float: left;}
  9.     .j_pagination_div .j_selected_span{text-align:left;display: inline-block;width: 60px;height: 30px;border: 1px solid #dddddd;padding-left: 10px;line-height: 30px;border-radius: 3px;background: url(down.png) no-repeat 50px 10px;cursor: pointer;}
  10.     .j_pagination_div .j_pagenum_list{position: absolute;border-radius:3px;border: 1px solid #dddddd; width: 70px;top: 35px;left: 5px;background-color: #ffffff;z-index: 10;}
  11.     .j_pagination_div .j_pagenum_list span{display: block;width: 100%;text-align: center;height: 25px;line-height: 25px;cursor: pointer;}
  12.     .j_pagination_div .j_pagenum_list .selected{color: #3896fe;}
  13.     .j_pagination_div .j_turn_div{float: left;margin-left: 15px;}
  14.     .j_pagination_div .j_turn_input{width: 50px;height: 28px;border: 1px solid #dddddd;text-align: center;border-radius: 3px;position: relative;top: -1px;}
  15.     .j_pagination_div .j_turn_btn{display: inline-block;width: 50px;height: 30px;border-radius: 3px;background-color: #ffffff;border: 1px solid #dddddd;margin-left: 15px;text-align: center;line-height: 30px;cursor: pointer;}
  16.     .j_pagination_div .j_turn_btn:hover{background-color: #3896fe;color: #ffffff;border: 1px solid #3896fe;}
  17.     .j_pagination_div .j_turn_span{display: inline-block;width: 50px;height: 30px;border: 1px solid #ffffff;border-radius: 3px;line-height: 30px;text-align: center;}
  18.     .j_pagination_div .j_turn_total{display: inline-block;height: 30px;border: 1px solid #ffffff;border-radius: 3px;line-height: 30px;text-align: center;}
  19.     .j_pagination_div .ul li.disabled{color: #666666!important;border: 1px solid #dddddd!important;background-color: #ffffff!important;cursor: not-allowed!important;}
  20.     .clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';}
  21.     .clearfix{zoom:1;}
  22. </style>

2 组件引用

具体引用步骤见评分插件

  1. <my-pagination  :page='page' v-on:turn_page='turn_page'></my-pagination>

3 插件配置

3.1 属性配置

属性名属性意义默认值是否必须
total总页数null是
current当前页1否
show_pages分页中间展示条目数5否
size列表每页展示条目数20是

3.2 回调函数

turn_page函数返回两个参数：page，size对应选择页数和每页大小，具体回调函数功能编写因人而异。

4 效果展示

229978affc7d3971db6853eb74c1432.png-7.9kB

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注