laravel+vue怎麼實現分頁功能-Laravel-PHP中文網

laravel+vue怎麼實現分頁功能

PHPz

發布： 2023-04-10 15:11:14

原創

699 人瀏覽過

Laravel是一個流行的PHP框架，而Vue.js是一個建立使用者介面的JavaScript框架。將它們結合使用可以為我們帶來更好的開發體驗和更有效率的開發。在開發網頁應用程式時，需要使用到分頁功能來處理大量資料的顯示。那麼，在Laravel和Vue中如何實現分頁呢？本文將介紹Laravel和Vue的分頁實作方法。

Laravel中的分頁

Laravel提供了一個方便的方式，在控制器中使用paginate函數傳回分頁集合。我們可以透過以下的程式碼實現分頁功能：

$users = DB::table('users')->paginate(10);

return view('user.index', ['users' => $users]);

登入後複製

在視圖檔案中我們可以使用Laravel提供的分頁運算元將分頁內容放到HTML頁面中。具體的程式碼如下：

@foreach ($users as $user)

    {{ $user->name }}

@endforeach

{{ $users->links() }}

登入後複製

這裡的$users->links()就是Laravel提供的分頁運算元。

在Laravel中，也可以透過將分頁指定為api資源類別來實現分頁。在資源類別中，我們可以使用Laravel提供的fractal和Paginator函式庫來實作分頁功能。要使用Paginator庫，需要先在控制器中進行以下配置：

use Illuminate\Pagination\LengthAwarePaginator;

protected function paginate($items, $perPage = 15, $page = null)
{
    $page = $page ?: (Paginator::resolveCurrentPage() ?: 1);
    return (new LengthAwarePaginator($items, count($items), $perPage, $page, [
        'path' => Paginator::resolveCurrentPath(),
        'pageName' => 'page',
    ]))->appends($this->request->query());
}

登入後複製

然後在資源類別中使用以下程式碼實作分頁功能：

public function toArray($request)
{
    return [
        'data' => $this->collection,
        'links' => [
            'self' => 'link-value',
        ],
        'meta' => [
            'total' => $this->total(),
            'per_page' => $this->perPage(),
            'current_page' => $this->currentPage(),
            'last_page' => $this->lastPage(),
            'from' => $this->firstItem(),
            'to' => $this->lastItem(),
        ],
    ];
}

登入後複製

Vue中的分頁

#在Vue中，我們可以使用第三方函式庫vue-pagination實作分頁功能。它是一個可自訂的元件，可以很方便地與Vue.js配合使用。

要使用vue-pagination元件，需要先引入元件並註冊：

import VuePagination from 'vue-pagination-2'

export default {
  components: {
    VuePagination
  },
  data () {
    return {
      currentPage: 1,
      ...
    }
  }
}

登入後複製

然後在HTML中可以這樣使用：

<vue-pagination :total="total"
                 :current-page="currentPage"
                 :per-page="perPage"
                 @paginate="loadPaginatedData"
                 :pagination-class="&#39;pagination&#39;"
                 :page-class="&#39;page-item&#39;">
</vue-pagination>

登入後複製

其中，total表示總頁數， currentPage表示目前頁數，perPage表示每頁顯示的資料量，paginate事件表示分頁時的回呼函數。

使用vue-pagination元件可以自訂分頁風格和功能，使用也相對簡單。

總結

在本文中，我們介紹了在Laravel和Vue中實作分頁的方法。在Laravel中，我們可以使用Laravel提供的paginate函數和Paginator函式庫，非常方便。在Vue中，我們可以使用第三方元件vue-pagination，讓分頁功能更加靈活和自訂。希望本文可以幫助你更好地實現分頁功能。 ###

以上是laravel+vue怎麼實現分頁功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！