我正在尝试修改现有页面，以将分页和过滤添加到页面正在获取的列表中。我设法使分页正常工作，但现在我试图通过不在屏幕底部加载所有 20,000 页码来使其更漂亮，并设计了一些仅显示 20 页的代码，理想情况下用户选择的页面将位于中间的某个位置（即，如果用户选择第 29 页，则底行将显示 19 到 39）
这是我的
+page.svelte<script>
import { page } from '$app/stores';
import ProjectBuild from '$lib/components/ProjectBuild.svelte';
import { getDuration } from '$lib/utils';
export let data;
const LIMIT_PER_PAGE = 4;
</script>
<div class="my-12 px-6 pb-48 md:px-24 lg:px-48 xl:px-72">
<h1 class="text-4xl font-bold text-slate-900 dark:text-white">Builds</h1>
<div class="grid grid-cols-4 gap-4 px-4 py-4">
<div class="col-span-1 flex-grow">
<ul class="mt-6 flex flex-col gap-y-2">
<!-- Filtration stuff -->
{#each data.integrationNames as integName}
<li>
<a href="{$page.url.pathname}?limit={LIMIT_PER_PAGE}&pagenum=1&filterby={integName}">
{integName}
</a>
</li>
{/each}
</ul>
</div>
<div class="col-span-3 flex-grow">
<ul class="mt-6 flex flex-col gap-y-4">
{#each data.builds as build}
<li>
<!-- Items per page -->
<ProjectBuild />
</li>
{/each}
</ul>
{#if !data.builds || data.builds.length === 0}
<p>No builds found</p>
{/if}
<div class="grid grid-rows-2">
<div class="row-span-1"></div>
<!-- Pagination -->
{#if data.pageInfo.totalPages > 1}
<div class="row-span-1 flex justify-center gap-x-3">
{#each data.pageInfo.pageRange as _, id}
<div>
<a href="{$page.url.pathname}?limit={LIMIT_PER_PAGE}&pagenum={id + 1}&filterby={data.filter}"
class={data.pageInfo.currentPage == id + 1 ? "font-bold text-slate-900 dark:text-green-400" : "font-bold text-slate-900 dark:text-white"}>
{id + 1}
</a>
</div>
{/each}
</div>
{/if}
</div>
</div>
</div>
</div>
现在这是我的
+page.server.tsimport type { PageServerLoad } from './$types';
import {
JSONApiResponse,
apiHostname,
apiCall,
ProjectBuildWithCountFromJSON,
} from '$lib/api';
import type { ProjectBuild, ProjectBuildsWithCount } from '$lib/types';
export const load: PageServerLoad = async ({ url, params, cookies }) => {
try {
const maxPageNumDisplay = 20;
const limitPerPage = url.searchParams.get('limit') || 4;
const pageNum = parseInt(url.searchParams.get('pagenum')) || 1;
const filter = url.searchParams.get("filterby") || "All Builds";
const [response] = await Promise.all([
apiCall(`${apiHostname}/v1/project/${params.id}/build?limit=${limitPerPage}&pagenum=${pageNum}`, undefined, cookies).then(
async (response) => {
let transformedJson = // Process results here
return transformedJson;
}
)
]);
if (response.count !== null && response.count !== undefined && response.builds !== null && response.builds !== undefined) {
let integNames = ["All Builds"];
let totalPages = Math.ceil(response.count / limitPerPage);
let filteredBuilds: ProjectBuild[] = [];
response.builds.forEach((build) => {
if (!integNames.includes(build.integrationName)) {
integNames.push(build.integrationName);
}
});
if (filter == "All Builds") {
filteredBuilds = response.builds;
} else {
response.builds.forEach((build) => {
if (build.integrationName === filter) {
filteredBuilds.push(build);
}
})
}
// This is where I tried to prettify my pagination by limiting the page numbers displayed to 20
let pageRange: Number[] = [];
let start = 1;
let end = totalPages;
if (totalPages > maxPageNumDisplay) {
end = maxPageNumDisplay
if (pageNum >= maxPageNumDisplay) {
start = pageNum - (maxPageNumDisplay / 2);
if (pageNum + (maxPageNumDisplay / 2) < totalPages) {
end = pageNum + (maxPageNumDisplay / 2);
} else {
end = totalPages;
}
}
}
pageRange = Array.from({ length: (end - start) / 1 + 1 }, (value, index) => start + index * 1);
return {
pageInfo: {
currentPage: pageNum,
totalPages: totalPages,
pageRange: pageRange
},
filter: filter,
builds: filteredBuilds,
integrationNames: integNames
};
}
return {
pageInfo: {
currentPage: pageNum,
totalPages: 1,
pageRange: [1]
},
filter: "All Builds",
builds: [],
integrationNames: []
};
} catch (err) {
throw err;
}
};
我现在的问题是页面似乎没有重新加载；从一开始，它显示页码 1 到 20。如果我选择 20，理想情况下它会显示页码 10 到 30。但它只显示 1 到 21。
通过
pageRangeconsole.log我尝试将以下内容添加到
+page.svelte$: pageRange = data.pageInfo.pageRange
...
{#each pageRange as _, id}
...
但它不会改变结果，奇怪的是，输出
pageRangeundefined我是否以错误的方式处理这个问题，或者我是否遗漏了代码中的某些内容？分页和过滤会更新显示的项目列表（如果这意味着什么）。
事实证明，在
+page.svelte{#each data.pageInfo.pageRange as _, id}
<div>
<a href="{$page.url.pathname}?limit={LIMIT_PER_PAGE}&pagenum={id + 1}&filterby={data.filter}" class={data.pageInfo.currentPage == id + 1 ? "font-bold text-slate-900 dark:text-green-400" : "font-bold text-slate-900 dark:text-white"}>
{id + 1}
</a>
</div>
{/each}
进入此：
{#each pageRange as pagenum}
<div>
<a href="{$page.url.pathname}?limit={LIMIT_PER_PAGE}&pagenum={pagenum}&filterby={data.filter}" class={data.buildPageInfo.currentPage == pagenum ? "font-bold text-slate-900 dark:text-green-400" : "font-bold text-slate-900 dark:text-white"}>
{pagenum}
</a>
</div>
{/each}
成功了。