您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

自定义分页参数及Tab页动态切换(laravel11+inertia实现双分页)

发布时间：2024-11-10 13:32:46编辑：雪饮阅读（）

其实要说是自定义分页参数，那么默认的分页参数
$tasks=\App\Models\UserTask::where(function($query) use($type,$request){
    if($type=="CurrentUser"){
            $query->where("uid",$request->user()->id);
    }
})->orderBy("id","desc")->paginate($pageSize)->setPageName("pageNumber");
像是这样，我们将默认的分页变量修改为pageNumber
那么如果用view层的分页，则分页链接应该如
http://localhost/user_task/index?pageNumber=1
但我们这里使用的是inertia，所以这点上其实我测试还是用的原来的page。我觉得这里就是没有必要纠结了。
 
那么接下来我们将最开始的那个project列表也进行下分页。
双分页的情况这里依旧先暂时放一放，那个也只是逻辑上的调整，没有什么技术含量。
 
算啦还是实现下吧。
首先咱们要说的就是虽然使用了inertia，但是有些地方确实还是需要用到vue3原生的ref。
我们这种双分页的需求其实不是很多见了，这种特殊的情况下多少需要点原生能力。
import {ref,watch} from 'vue';
接下来我们需要定义两个分页对应的数据结构，比如我要对以前的项目列表和现在的user task都分页于一个页面中。那么这里就不考虑是否是当前用户的情况下了，就是全部用户的了。
而且要做在dashboard页面上。一般dashboard页面是总览页面，这样很符合一般习惯。
包括上面这个import也是做在dashboard页面的。
并且我希望每个分页数据家族过程中需要有loading效果
所以如Y:\root\example-app\resources\js\Pages\Dashboard.vue中
首先定义两种分页数据结构和loading的flag。
const projectData=ref({});
const projectLoading=ref(true);
const userTaskData=ref({});
const userTaskLoading=ref(true);
const userTaskLoaded=ref(false);
分页加载过程中首先要知道是去那一页，还要知道类型（我这里想要的是加载数据统一封装，用分页类型去区分加载那种数据结构的分页），并且本次对于userTask中的param数据解析我需要放在前端，所以数据加载的封装方法实现如：
const getData=(type,page)=>{
    axios.get(route('dashboard.datas'),{
        params:{
            type:type,
            page:page
        }
    })
        .then(response => {
            console.log("response.data",response.data);
            if(type=='project'){
                projectData.value=response.data;
                projectLoading.value=false;
            }
            if(type=='userTask'){
                var data=response.data;
                for(var i in data.data){
                    if(data.data[i].type==1){
                        data.data[i].typeFormat="SendEmail";

                    }
                    if(!data.data[i].param){
                        data.data[i].tableParam=[];
                    }
                    if(data.data[i].param){
                        var sparam=JSON.parse(data.data[i].param);
                        console.log("sparam",sparam);
                        data.data[i].sparam=sparam;
                        data.data[i].tableParam=[sparam];
                    }
                }
                console.log("data",data);
                userTaskData.value=data;

                userTaskLoading.value=false;
                userTaskLoaded.value=true;
            }


        })
        .catch(error => {

        });

}
然后对这两种分页进行首次加载
getData('project',1);
getData('userTask',1);
两种分页组件页码改变的同时也是需要监听处理去加载数据的
const projectPageChange=(param_currentPage,param_pageSize)=>{
    getData('project',param_currentPage);
}
const userTaskPageChange=(param_currentPage,param_pageSize)=>{
    getData('userTask',param_currentPage);
}
由于多种分页，并且userTask的param相当于是子表的实现了，数据比较多，所以dashboard原本的width为80rem就得修改更大些
<div class="mx-auto max-w-full sm:px-6 lg:px-8">
这里原本是max-w-7xl
那么接下来两种分页的界面实现如
<div class="p-6 text-gray-900 dark:text-gray-100">
    <div style="display: flex;justify-content: space-between;">
        <div class="wrap80">
            <h1>Project List</h1>
            <div class="wrap82">
                <el-table v-loading="projectLoading" :data="projectData.data" border style="width: 100%">
                    <el-table-column prop="id" label="ID" />
                    <el-table-column prop="name" label="Name" />
                    <el-table-column  label="Avatar" >
                        <template v-slot="scope">
                            <img :src="scope.row.avatar" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="user.name" label="User" />
                    <el-table-column prop="category.name" label="Category" />
                </el-table>
                <div class="example-pagination-block">
                    <el-pagination layout="prev, pager, next" :total="projectData.total" :page-size="projectData.per_page" :default-current-page="projectData.current_page" @change="projectPageChange"/>
                </div>
            </div>



        </div>
        <div class="wrap80">
            <h1>User Task List</h1>
            <div class="wrap82">
                <el-table v-loading="userTaskLoading" :data="userTaskData.data" border style="width: 100%">
                    <el-table-column prop="id" label="Id" width="50"/>
                    <el-table-column prop="typeFormat" label="Type" width="100" />
                    <el-table-column label="Param">
                        <template v-slot="scope">
                            <el-table :data="scope.row.tableParam" border style="width: 100%">
                                <el-table-column prop="email" label="Email" />
                                <el-table-column prop="sendTime" label="SendTime" />
                                <el-table-column prop="subject" label="Subject" />
                                <el-table-column prop="body" label="Body" />
                            </el-table>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="example-pagination-block">
                    <el-pagination layout="prev, pager, next" :total="userTaskData.total" :page-size="userTaskData.per_page" :default-current-page="userTaskData.current_page" @change="userTaskPageChange"/>
                </div>
            </div>


        </div>
    </div>



</div>
样式封装
<style>
.wrap80{
    width: 49%;display: flex;flex-direction: column;
}
.wrap82{
    flex:1;display: flex;justify-content: space-between;flex-direction: column;
}
</style>
既然我们请求了一个新的控制器/方法，所以web.php中需要新增路由
Route::get('/dashboard/datas', [DashboardController::class, 'datas'])->name('dashboard.datas');
于auth组
我们希望我们获取userTask的所属用户以及job更优雅，所以UserTask.php模型也进行下关联
public function user(): HasOne
{
    return $this->hasOne(User::class,"id","uid");
}
public function Job(): HasOne
{
    return $this->hasOne(Jobs::class,"id","job_id");
}
然后实现Dashboard控制器Y:\root\example-app\app\Http\Controllers\DashboardController.php的datas方法如
public function datas(Request $request)
{
    $pageSize=$request->input("pageSize",2);
    $type=$request->input("type");
    if($type=='project'){
        $data=Project::with(['user','category'])->orderBy("id","desc")->paginate($pageSize);
    }
    if($type=='userTask'){
        $data=\App\Models\UserTask::with(['user','job'])->orderBy("id","desc")->paginate($pageSize);
    }

    return $data;
}
最后就是咱们的双分页成果

可以看到一个分页的操作并不会影响另一个分页。
本期词汇
majority 大多数
axios 一个 HTTP 客户端库
Authenticated 已验证（authenticate 的过去分词）