How to implement paging function in laravel+vue

Laravel is a popular PHP framework, while Vue.js is a JavaScript framework for building user interfaces. Using them together can bring us a better development experience and more efficient development. When developing web applications, you need to use the paging function to handle the display of large amounts of data. So, how to implement pagination in Laravel and Vue? This article will introduce the paging implementation method of Laravel and Vue.

Pagination in Laravel

Laravel provides a convenient way to use the paginate function in the controller to return a paginated collection. We can implement the paging function through the following code:

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

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

In the view file, we can use the paging operator provided by Laravel to put the paging content into the HTML page. The specific code is as follows:

@foreach ($users as $user)

    {{ $user->name }}

@endforeach

{{ $users->links() }}

The $users->links() here is the paging operator provided by Laravel.

In Laravel, pagination can also be implemented by specifying pagination as an api resource class. In the resource class, we can use the fractal and Paginator libraries provided by Laravel to implement the paging function. To use the Paginator library, you need to first configure the following in the controller:

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());
}

Then use the following code in the resource class to implement the paging function:

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(),
        ],
    ];
}

Paging in Vue

In Vue, we can use the third-party library vue-pagination to implement the paging function. It is a customizable component that can be easily used with Vue.js.

To use the vue-pagination component, you need to first introduce the component and register it:

import VuePagination from 'vue-pagination-2'

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

Then you can use it in HTML like this:

<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>

Among them, total represents the total number of pages, currentPage represents the current page number, perPage represents the amount of data displayed on each page, and the paginate event represents the callback function during paging.

Using the vue-pagination component can customize the paging style and function, and it is relatively simple to use.

Summary

In this article, we introduced methods to implement pagination in Laravel and Vue. In Laravel, we can use the paginate function and Paginator library provided by Laravel, which is very convenient. In Vue, we can use the third-party component vue-pagination to make the paging function more flexible and customized. I hope this article can help you better implement the paging function. ###

The above is the detailed content of How to implement paging function in laravel+vue. For more information, please follow other related articles on the PHP Chinese website!