vuejs实现本地数据的筛选分页功能思路详解


Posted in Javascript onNovember 15, 2017

今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是ajax获取的数据,这不符合要求啊,修改起来太费力气,还不如我自己去写,不多说直接上代码

效果图:

vuejs实现本地数据的筛选分页功能思路详解

项目需要:点击左侧进行数据筛选,实现自动分页,自动生成页数,点击自动跳转

项目代码:js代码

var subList=new Vue({
  el:'#main',
  data:{
    // subcontentData为本地数据
    subContents:subcontentData,
    // 页面需要展现的数据
    yemiandata:[],
    // 页面展现条数
    datanum:12,
    // 开始椰树
    startnum:0,
    // 结束椰树
    endnum:1,
    // 一共多少页
    btnnum:0,
    // 生成切换页面的按钮用
    listnum:[],
    // input跳转
    jemp:1,
  },
  methods:{
    filters(num){
      this.subContents=subcontentData;
      // 需要重置防止翻页导致startnum和endnum不一致
      this.startnum=0;
      this.endnum=1;
      // 这里是判断筛选按钮
      switch(num){
        case 0: $('#sublist li').css({
          background:'#f2f2f2'
        }).eq(0).css({
          background:'#dbe9f0'
        });
          this.fenye();
          break;
        case 1:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(1).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('行政');
          });
          this.fenye();
          break;
        case 2:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(2).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('报关');
          });
          this.fenye();
          break;
        case 3:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(3).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('组装');
          });
          this.fenye();
          break;
        case 4:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(4).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('电子');
          });
          this.fenye();
          break;
        case 5:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(5).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('工艺');
          });
          this.fenye();
          break;
        case 6:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(6).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('财务');
          });
          this.fenye();
          break;
        case 7:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(7).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('制造');
          });
          this.fenye();
          break;
        case 8:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(8).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('销售');
          });
          this.fenye();
          break;
      }
    },
    // 分野函数
    fenye(){
      this.yemiandata=this.subContents.slice(this.startnum*this.datanum,this.endnum*this.datanum);
      this.btnnum=Math.ceil(this.subContents.length/this.datanum);
      this.listnum=[];
      for(i=0;i<this.btnnum;i++){
        this.listnum[i]=i+1;
      }
      btnwidth();
    },
    // 下一页函数
    nextlist(){
      if(this.endnum>= this.btnnum){
        alert('最后一页了');
        return false;
      }
      this.endnum++;
      this.startnum++;
    },
    // 上一页函数
    prevlist(){
      if(this.startnum<= 0){
        alert('第一页了');
        return false;
      }
      this.endnum--;
      this.startnum--;
    },
    // 按钮跳转到制定的页面
    jemppage(list){
      this.startnum=list-1;
      this.endnum=list;
    },
    // input跳抓
    goindex(){
      console.log(parseInt(this.jemp));
      if(parseInt(this.jemp)>this.btnnum){alert('请输入合法参数');return}
      this.endnum=this.jemp;
      this.startnum=this.jemp-1;
    }
  },
  // 使用一个监听。可以减少很多代码
  watch:{
    startnum(n,o){
      this.yemiandata=this.subContents.slice(n*this.datanum,(parseInt(n)+1)*this.datanum);
    }
  }
});
  subList.filters(0);
  subList.fenye();
  // 封装一下底部btn方法 底部自动大小
  function btnwidth(){
    $('#fbtn').css({
      width:(subList.listnum.length+2)*40+293+'px',
      marginLeft:-((subList.listnum.length+2)*40+293)/2+'px'
    })
  }
  btnwidth();

下面是html节点代码:

<div class="main_content">
      <div class="table2_nav">
        <ul id="sublist">
          <li @click="filters(0)"><div class="blockcenter">部门分类(部门8/8)</div></li>
          <li @click="filters(1)"><div class="blockcenter">行政部</div></li>
          <li @click="filters(2)"><div class="blockcenter">报关科</div></li>
          <li @click="filters(3)"><div class="blockcenter">组装部</div></li>
          <li @click="filters(4)"><div class="blockcenter">电子部</div></li>
          <li @click="filters(5)"><div class="blockcenter">工艺部</div></li>
          <li @click="filters(6)"><div class="blockcenter">财务部</div></li>
          <li @click="filters(7)"><div class="blockcenter">制造部</div></li>
          <li @click="filters(8)"><div class="blockcenter">销售部</div></li>
        </ul>
      </div>
      <div class="table2_content">
        <div class="col-title bg-fff clearfix">
          <h5 class="fl">告警策略报表统计</h5>
          <div class="btn fl">
            主机名称 <span class="caret"></span>
            <div class="btn_down">
              <ul>
                <li>下啦</li>
                <li>下啦2</li>
              </ul>
            </div>
          </div>
          <div class="fl btn2">
            添加
          </div>
        </div>
        <table width="1410px" class="table" id="tablelist tab">
          <tr>
            <th>工号</th>
            <th>姓名</th>
            <th>部门名称</th>
            <th>性别</th>
            <th>籍贯</th>
            <th>员工状态</th>
            <th>入职时间</th>
            <th>离职时间</th>
            <th>离职类别</th>
          </tr>
          <tr v-for="subContent in yemiandata">
            <td>{{subContent.num}}</td>
            <td>{{subContent.name}}</td>
            <td>{{subContent.department}}</td>
            <td>{{subContent.sex}}</td>
            <td>{{subContent.addres}}</td>
            <td>{{subContent.staic}}</td>
            <td>{{subContent.jointime}}</td>
            <td>{{subContent.leavetime}}</td>
            <td>{{subContent.type}}</td>
          </tr>
        </table>
        <div class="vuetab clearfix">
          <ul class="fbtn clearfix" id="fbtn">
            <li @click="prevlist()"><</li>
            <!--<li @click="jemppage($event)">1</li>-->
            <li v-for="list in listnum" @click="jemppage(list)">{{list}}</li>
            <li @click="nextlist()">></li>
            <div id="pages">共{{btnnum}}页</div>
            <div id="gotoindex">到第 <input type="text" :value="jemp" v-model="jemp" id="inputnum"> 页</div>
            <button id="gobtn" @click="goindex()">确定</button>
          </ul>
        </div>
      </div>
</div>

说下思路:首先我们需要本地一组数据,通过vue添加到页面中,第二步我们需要做好分页,那么可以写一个函数对吧,所以有了下面的fenye(命名不规范,大虾勿怪)函数,所谓分页无非就是把一个大数据分成每个小页面去展现,所以我写了一个专门用来展现的数组,也就是yemiandata(同样不规范,我说因为我做的网站内容太多了,所以命名已经用尽了,你们信么),之后我们需要得到多少个页面,并变成一个btn按钮,为了省事,我增加了一个watch:用来监听startnum(开始页数)他变化的话就改变展现。

第三步:分页的话肯定要有上一页下一页,这个就简单多了下一页就是startnum和endnum都增加一,上一页反之。

第四步:也要有点击页数的按钮进行跳转,这个也不难,就是让按钮点下去跳转到指定页,但是去写函数么?不现实对吧,所以我用了一个数组listnum存放多少个按钮,这里解释下为什么不用变量用数组,因为vue中v-for不支持变量循环,所以我改用数组,方便前面html生成节点。

第五步说了需要做筛选,筛选的话就是吧需要展现的素组变成包含制定关键词的,filters函数,利用js的filter和includes进行筛选,做完看看,失败了,出现了很多undefind,为什么?仔细看看没有重置数组,导致第二次筛选是在第一次筛选完的基础筛选。那就重置一下咯,再看看,搞定!

总结

以上所述是小编给大家介绍的vuejs实现本地数据的筛选分页功能思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
数组Array的排序sort方法
Feb 17 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
vue v-model的用法解析
Oct 19 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 #Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 #Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 #Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 #Javascript
判断div滑动到底部的scroll实例代码
Nov 15 #Javascript
Vue.js实现列表清单的操作方法
Nov 15 #Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 #Javascript
You might like
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
PHP7修改的函数
2021/03/09 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
Flask-Mail用法实例分析
2018/07/21 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python返回数组的索引实例
2019/11/28 Python
Python多线程获取返回值代码实例
2020/02/17 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
出国考察邀请函
2014/01/21 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
个人委托书
2014/07/31 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
用人单位聘用意向书
2015/05/11 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
浅谈Python数学建模之固定费用问题
2021/06/23 Python