Question

如何或可以为所有成员创建过滤器，因为现在我大约有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);
}

Answer 1

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

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

如果过滤器正常工作，则必须对所有过滤对象进行分页，我的解决方案仅说明如何将分页列表从25个扩展到100个。

分页过滤数据

1 个答案: