vuejs implements the filtering and paging function of local data

To do a project, you need a filtering and paging function based on local data. Below, the editor will share the implementation ideas of vuejs to implement the filtering and paging function of local data to the Script Home platform. Friends who need it can refer to it. I hope it can help everyone. .

Rendering:

Project requirements: Click on the left to filter data, realize automatic paging, automatically generate the number of pages, click to automatically jump

Project code: js code

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(&#39;最后一页了&#39;);
        return false;
      }
      this.endnum++;
      this.startnum++;
    },
    // 上一页函数
    prevlist(){
      if(this.startnum<= 0){
        alert(&#39;第一页了&#39;);
        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(&#39;请输入合法参数&#39;);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(){
    $(&#39;#fbtn&#39;).css({
      width:(subList.listnum.length+2)*40+293+&#39;px&#39;,
      marginLeft:-((subList.listnum.length+2)*40+293)/2+&#39;px&#39;
    })
  }
  btnwidth();

The following is the html node code:

<p class="main_content">
      <p class="table2_nav">
        <ul id="sublist">
          <li @click="filters(0)"><p class="blockcenter">部门分类（部门8／8）</p></li>
          <li @click="filters(1)"><p class="blockcenter">行政部</p></li>
          <li @click="filters(2)"><p class="blockcenter">报关科</p></li>
          <li @click="filters(3)"><p class="blockcenter">组装部</p></li>
          <li @click="filters(4)"><p class="blockcenter">电子部</p></li>
          <li @click="filters(5)"><p class="blockcenter">工艺部</p></li>
          <li @click="filters(6)"><p class="blockcenter">财务部</p></li>
          <li @click="filters(7)"><p class="blockcenter">制造部</p></li>
          <li @click="filters(8)"><p class="blockcenter">销售部</p></li>
        </ul>
      </p>
      <p class="table2_content">
        <p class="col-title bg-fff clearfix">
          <h5 id="告警策略报表统计">告警策略报表统计</h5>
          <p class="btn fl">
            主机名称 <span class="caret"></span>
            <p class="btn_down">
              <ul>
                <li>下啦</li>
                <li>下啦2</li>
              </ul>
            </p>
          </p>
          <p class="fl btn2">
            添加
          </p>
        </p>
        <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>
        <p 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>
            <p id="pages">共{{btnnum}}页</p>
            <p id="gotoindex">到第 <input type="text" :value="jemp" v-model="jemp" id="inputnum"> 页</p>
            <button id="gobtn" @click="goindex()">确定</button>
          </ul>
        </p>
      </p>
</p>

Let’s talk about the idea: First we need a local set of data and add it to the page through vue. In the second step we need to do paging, so we can write a function, right, so we have the following fenye (named irregularly, don’t blame prawns) function, so-called Pagination is nothing more than dividing a big data into each small page for display, so I wrote an array specifically for display, which is yemiandata (it is also not standardized. I said that because the website I made has too much content, the name has been changed. (Exhausted, do you believe it)? After that, we need to get as many pages as possible and turn it into a btn button. To save trouble, I added a watch: used to monitor startnum (starting page number) and change the display if it changes.

Step 3: If you want to paginate, you must have the previous page and the next page. This is much simpler. The next page will increase both startnum and endnum by one, and vice versa for the previous page.

Step 4: There must also be a button that clicks on the page number to jump. This is not difficult, just let the button be clicked to jump to the specified page, but do you need to write a function? It's unrealistic, right, so I used an array listnum to store how many buttons there are. Here's an explanation of why arrays are not used as variables. Because v-for in Vue does not support variable loops, I switched to arrays to facilitate the generation of nodes in the previous html.

The fifth step mentioned the need to filter. To filter, just change the element group that needs to be displayed into the one containing the specified keywords, filters function, use js filters and includes to filter, and see if you are done. Look, it failed and there were a lot of undefinds. Why? Take a closer look at the fact that the array is not reset, causing the second filtering to be based on the first filtering. Then reset it, check again, it’s done!

Related recommendations:

3.1.3 Multi-filter paging routing

In-depth understanding of jQuery layui paging control Use

LayUI to implement front-end paging function

The above is the detailed content of vuejs implements the filtering and paging function of local data. For more information, please follow other related articles on the PHP Chinese website!