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，使 <div class="md:flex flex-col w-full items-center"> <div class="relative mb-4"> <form action="index" method="POST"> {% csrf_token%} <label for="full-name" class="leading-7 text-sm text-gray-600">Duration of Lead Time in Day(s)</label> <input type="text" id="full-name" placeholder="1 to 5 or ALL" name="leadtime" class="w-full bg-white rounded border border-gray-300 focus:border-green-500 focus:ring-2 focus:ring-green-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"> </form> </div> <div class="relative mb-4"> <form action="index" method="post" enctype="multipart/form-data"> {% csrf_token %} <input type="file" title="Upload excel file" name="excel_file" style="border: 3px solid green ; padding: 5px;" required="required"> </div> <button type = "submit" class="flex mx-auto text-white bg-green-500 border-0 py-2 px-8 focus:outline-none hover:bg-green-600 rounded text-lg items-center">Submit</button> </div> 依赖于 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

请参阅 this REPL 以获取精简示例。

使用 Svelte 进行表格分页

1 个答案: