The idea of implementing local data filtering and paging function in vuejs-JS Tutorial-php.cn

The idea of implementing local data filtering and paging function in vuejs

小云云

Release： 2017-12-21 09:24:02

Original

2321 people have browsed it

I encountered a project that required a filtering and paging function based on local data. I searched the Internet and found all the data obtained by ajax. It was too laborious to modify, so I wrote it myself. This article will share with you Share the idea of implementing the local data filtering and paging function in vuejs. 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:&#39;#main&#39;,
  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: $(&#39;#sublist li&#39;).css({
          background:&#39;#f2f2f2&#39;
        }).eq(0).css({
          background:&#39;#dbe9f0&#39;
        });
          this.fenye();
          break;
        case 1:
          $(&#39;#sublist li&#39;).css({
            background:&#39;#f2f2f2&#39;
          }).eq(1).css({
            background:&#39;#dbe9f0&#39;
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num[&#39;department&#39;]).includes(&#39;行政&#39;);
          });
          this.fenye();
          break;
        case 2:
          $(&#39;#sublist li&#39;).css({
            background:&#39;#f2f2f2&#39;
          }).eq(2).css({
            background:&#39;#dbe9f0&#39;
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num[&#39;department&#39;]).includes(&#39;报关&#39;);
          });
          this.fenye();
          break;
        case 3:
          $(&#39;#sublist li&#39;).css({
            background:&#39;#f2f2f2&#39;
          }).eq(3).css({
            background:&#39;#dbe9f0&#39;
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num[&#39;department&#39;]).includes(&#39;组装&#39;);
          });
          this.fenye();
          break;
        case 4:
          $(&#39;#sublist li&#39;).css({
            background:&#39;#f2f2f2&#39;
          }).eq(4).css({
            background:&#39;#dbe9f0&#39;
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num[&#39;department&#39;]).includes(&#39;电子&#39;);
          });
          this.fenye();
          break;
        case 5:
          $(&#39;#sublist li&#39;).css({
            background:&#39;#f2f2f2&#39;
          }).eq(5).css({
            background:&#39;#dbe9f0&#39;
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num[&#39;department&#39;]).includes(&#39;工艺&#39;);
          });
          this.fenye();
          break;
        case 6:
          $(&#39;#sublist li&#39;).css({
            background:&#39;#f2f2f2&#39;
          }).eq(6).css({
            background:&#39;#dbe9f0&#39;
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num[&#39;department&#39;]).includes(&#39;财务&#39;);
          });
          this.fenye();
          break;
        case 7:
          $(&#39;#sublist li&#39;).css({
            background:&#39;#f2f2f2&#39;
          }).eq(7).css({
            background:&#39;#dbe9f0&#39;
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num[&#39;department&#39;]).includes(&#39;制造&#39;);
          });
          this.fenye();
          break;
        case 8:
          $(&#39;#sublist li&#39;).css({
            background:&#39;#f2f2f2&#39;
          }).eq(8).css({
            background:&#39;#dbe9f0&#39;
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num[&#39;department&#39;]).includes(&#39;销售&#39;);
          });
          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();

Copy after login

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 class="fl">告警策略报表统计</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>

Copy after login

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 said that filtering is needed. To filter, the element group that needs to be displayed is changed to include the specified keywords. The filters function uses js filters and includes to filter. Finish. 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.

Have you learned it? Hurry up and give it a try.

Related recommendations:

How to use PHP to implement list paging function

Detailed explanation of front-end code implementation and request processing of JavaScript paging function

Vue.js realizes infinite loading and paging function development

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