svelte - 使用 Svelte 的表格分页

Question

我正在开始使用 Svelte 构建的项目，之前从未使用过 Svelte。我正在用分页构建表格，我现在遇到的问题是我不知道如何实现分页按钮来显示不同的行。有什么建议我应该在接下来的步骤中做什么吗？

<script>
  import { onMount } from "svelte";
  
  import Header from "./components/Header.svelte";
  import Row from "./components/Row.svelte";
  import Footer from "./components/Footer.svelte";
  import Overlay from "./components/Overlay.svelte";

  let rows = [];
  let page = 0;
  let totalPages = [];
  let currentPageRows = [];
  let itemsPerPage = 5;
  let loading = true;

  const paginate = (items) => {
    const pages = Math.ceil(items.length / itemsPerPage);

    const paginatedItems = Array.from({ length: pages }, (_, index) => {
      const start = index * itemsPerPage;
      return items.slice(start, start + itemsPerPage);
    });

    console.log("paginatedItems are", paginatedItems);
    totalPages = [...paginatedItems];
    currentPageRows = paginatedItems[page];
  };

  onMount(() => {
    fetch("devapi/accountStatement/transactions.json")
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw Error(response.status);
      })
      .then((data) => {
        rows = data;
        paginate(data);
        loading = false;
      })
      .catch((error) => {
        console.log(error);
      });
  });

  const nextPageHandler = () => {
    if (page < totalPages.length) {
      page += 1;
    }

    console.log("page is", page);
  };

  const previousPageHandler = () => {
    if (page > 0) {
      page -= 1;
    }

    console.log("page is", page);
  };
</script>

<table class="table table-bordered table-striped table-hover">
  <Header />

  <tbody>
    {#if loading}
      <Overlay />
    {/if}
    {#each currentPageRows as row, i}
      <Row {row} />
    {:else}
      <tr>
        <td colspan="100%">
          <h5 class="text-center">There is no data to display here.</h5>
        </td>
      </tr>
    {/each}
  </tbody>
  <Footer />
</table>
<nav class="pagination">
  <ul>
    <li>
      <button
        type="button"
        class="btn-next-prev"
        on:click={() => previousPageHandler()}
        >PREV
      </button>
    </li>

    {#each totalPages as page, i}
      <li>
        <button type="button" class="btn-page-number">{i + 1}</button>
      </li>
    {/each}

    <li>
      <button
        type="button"
        class="btn-next-prev"
        on:click={() => nextPageHandler()}
        >NEXT
      </button>
    </li>
  </ul>
</nav> 

Answer 1

你快到了。你要做的是引入 Svelte 的 reactive statements ，使 currentPageRows 依赖于 page 的当前值。

只需一行代码即可完成:

  ...
  let rows = [];
  let page = 0;
  let totalPages = [];
  let currentPageRows = [];
  let itemsPerPage = 5;
  let loading = true;

  $: currentPageRows = totalPages.length > 0 ? totalPages[page] : [];

  const paginate = (items) => {
    ...
  }
  ...

您还可以使用一个函数简化您对页面导航的处理:

  const setPage = (p) => {
    if (p >= 0 && p < totalPages.length) {
      page = p;
    }
  }

并在所有的 on:click 事件处理程序中使用此函数:

<nav class="pagination">
  <ul>
    <li>
      <button
        type="button"
        class="btn-next-prev"
        on:click={() => setPage(page - 1)}
      >
        PREV
      </button>
    </li>

    {#each totalPages as page, i}
      <li>
        <button
          type="button"
          class="btn-page-number"
          on:click={() => setPage(i)}
        >
          {i + 1}
        </button>
      </li>
    {/each}

    <li>
      <button
        type="button"
        class="btn-next-prev"
        on:click={() => setPage(page + 1)}
      >
        NEXT
      </button>
    </li>
  </ul>
</nav>

参见 this REPL一个精简的例子。