로컬 데이터를 기반으로 한 필터링 및 페이징 기능이 필요한 프로젝트를 발견했습니다. 온라인에서 모든 데이터를 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();로그인 후 복사
다음 코드:
<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>로그인 후 복사
아이디어에 대해 이야기해 보겠습니다. 먼저 로컬 데이터 세트가 필요하고 이를 vue를 통해 페이지에 추가해야 합니다. 함수, 그렇죠, 그래서 우리는 다음과 같은 fenye(이름 지정이 표준화되어 있지 않습니다. 새우를 비난하지 마십시오) 함수를 가지고 있습니다. 소위 페이징은 큰 데이터를 각각의 작은 페이지로 나누어 표시하는 것에 불과하므로 다음과 같이 썼습니다. 예미안데이터(표준화되지 않은 디스플레이용 배열) 문제를 해결하기 위해 시계를 추가했습니다. startnum( 시작 페이지)을 모니터링하려면 표시가 변경됩니다.
3단계: 페이지를 매기려면 이전 페이지와 다음 페이지가 있어야 합니다. 이는 훨씬 간단합니다. 다음 페이지에서는 이전 페이지의 경우 startnum과 endnum이 모두 1씩 증가합니다.
4단계: 페이지 번호를 클릭하여 이동하는 버튼도 있어야 합니다. 버튼을 클릭하면 지정된 페이지로 이동하기만 하면 되지만, 함수를 작성해야 합니까? 비현실적입니다. 그래서 배열 listnum을 사용하여 버튼 수를 저장했습니다. Vue의 v-for는 변수 루프를 지원하지 않기 때문에 배열을 변수로 사용하지 않는 이유에 대한 설명은 다음과 같습니다. 이전 HTML에서 노드 생성.
다섯 번째 단계에서는 필터링이 필요하다고 말했습니다. 필터 기능은 js의 필터와 포함을 사용하여 표시해야 하는 요소 그룹을 변경한 후 확인합니다. 실패하면 미확인 항목이 많이 표시됩니다. 이유는 무엇입니까? 어레이가 재설정되지 않아 두 번째 필터링이 첫 번째 필터링을 기반으로 한다는 사실을 자세히 살펴보세요. 그런 다음 재설정하십시오.
아직 배우셨나요? 서둘러서 한번 시도해 보세요.
관련 권장 사항:
PHP를 사용하여 목록 페이징 기능을 구현하는 방법
프런트 엔드 코드 구현에 대한 자세한 설명 및 JavaScript 페이징 기능 요청 처리
Vue.js를 통해 무한 로딩 및 페이징 기능 구현 개발
위 내용은 vuejs에서 로컬 데이터 필터링 및 페이징 기능을 구현하려는 아이디어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
