时间戳

首页 > 解决方案 > 使用分页过滤数据

javascript - 使用分页过滤数据

问题描述

我如何或可以为所有成员创建过滤器，因为现在我有大约 50 个成员，但由于分页，该页面仅显示其中 25 个。由于该页面仅包含 25 个成员的数据，我不确定是否可以进行过滤，因为过滤后的搜索可能在其他 25 个尚未获取的数据中。提前致谢

零件

<input type="text" class="form-control border border-dark text-center" placeholder="Find someone ...">

<div class="row justify-content-center">
    <div style="background-color:rgba(0,0,0, 0.1)" class= "card col-md-2 col-4 m-3 p-0" v-for="member in members" v-bind:key="member.id">
        <a :href="`#${member.alias_name}`" @click="openModal(member)">
        <img class="card-img-top" :src="getImgFile()">
        <div class="card-body">
            <p class="card-text text-white text-center">{{member.alias_name}}</p>
        </div>
        </a>
    </div>

方法

fetchMembers(page_url){
   let vm=this;
   page_url=page_url || '/api/members/fetchMembers'
   fetch(page_url).then(res=>res.json()).then(res=>{
    this.members = res.data;
    vm.makePagination(res.meta,res.links);
   })
   .catch(err=>console.log(err));
},
makePagination(meta,links){
   let pagination={
      current_page:meta.current_page,
      last_page:meta.last_page,
      next_page_url:links.next,
      prev_page_url:links.prev
   }
  this.pagination = pagination;
},

控制器

public function fetchMembers()
{
    $members = Member::orderBy("id","ASC")->paginate(25);
    return MemberResource::collection($members);
}

标签： javascriptphplaravelvue.jsfilter

解决方案

要在您的页面中显示更多成员，只需执行此操作，请编辑此行：

public function fetchMembers()
{
    $members = Member::orderBy("id","ASC")->paginate(100);//<----- 100 per page
    return MemberResource::collection($members);
}

如果过滤器工作正常，您必须对所有过滤对象进行分页，我的解决方案只是解释如何将分页列表从 25 个项目扩展到 100 个。

推荐阅读