当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

laravel-vue-pagination

授权协议 MIT License

开发语言 PHP

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者施锋

操作系统跨平台

开源组织无

适用人群未知

软件概览

Want your logo here? Sponsor me on GitHub

Laravel Vue Pagination

A Vue.js pagination component for Laravel paginators that works with Bootstrap.

Requirements

Install

npm install laravel-vue-pagination
// or
yarn add laravel-vue-pagination

Demo

See https://laravel-vue-pagination.now.sh

Usage

Vue.component('pagination', require('laravel-vue-pagination'));

Use the component:

<ul>
    <li v-for="post in laravelData.data" :key="post.id">{{ post.title }}</li>
</ul>

<pagination :data="laravelData" @pagination-change-page="getResults"></pagination>

export default {

	data() {
		return {
			// Our data object that holds the Laravel paginator data
			laravelData: {},
		}
	},

	mounted() {
		// Fetch initial results
		this.getResults();
	},

	methods: {
		// Our method to GET results from a Laravel endpoint
		getResults(page = 1) {
			axios.get('example/results?page=' + page)
				.then(response => {
					this.laravelData = response.data;
				});
		}
	}

}

Customizing Prev/Next Buttons

Prev/Next buttons can be customized using the prev-nav and next-nav slots:

<pagination :data="laravelData">
	<span slot="prev-nav">&lt; Previous</span>
	<span slot="next-nav">Next &gt;</span>
</pagination>

API

Props

Name	Type	Description
`data`	Object	An object containing the structure of a Laravel paginator response or a Laravel API Resource response.
`limit`	Number	(optional) Limit of pages to be rendered. `0` shows all pages (default). `-1` will hide numeric pages and leave only arrow navigation. Any positive integer (e.g. `2`) will define how many pages should be shown on either side of the current page when only a range of pages are shown.
`show-disabled`	Boolean	(optional) Show disabled prev/next buttons instead of hiding them. `false` hides disabled buttons (default). `true` shows disables buttons.
`size`	String	(optional) One of `small`, `default` or `large`
`align`	String	(optional) One of `left` (default), `center` or `right`

Events

Name	Description
`pagination-change-page`	Triggered when a user changes page. Passes the new `page` index as a parameter.

Development

To work on the library locally, run the following command:

npm run serve

To run the tests:

npm run test

Show your Support

To show your support for my work on this project:

Credits

Laravel Vue Pagination was created by Gilbert Pellegrom from Dev7studios. Released under the MIT license.

使用案例

适用于Laravel分页器的Vue.js分页组件，可与Bootstrap一起使用

Laravel Vue分页 (Laravel Vue Pagination) A Vue.js pagination component for Laravel paginators that works with Bootstrap. 一个适用于Laravel分页器的Vue.js分页组件，可与Bootstrap一起使用。要求 (Requirements) Vue.js 2.x Laravel
laravel：手动分页 --paginate（）方法

use Illuminate\Pagination\LengthAwarePaginator; use Illuminate\Pagination\Paginator; $perPage = 10; //每页显示数量 if ($request->has('page')) { $current_page = $request->input('page');
Laravel + Vue.js 开发

教学： Building a Vue SPA with Laravel | Laravel News Building a Vue SPA With Laravel Part 6 | Laravel News 参考： https://github.com/shivragshukla/laravel-vue [Day 23] Laravel + Vue.js - 環境設置 - iT 邦幫忙::一起幫
laravel vue使用

首先安装vue和vue-router npm install vue npm install vue-router laravel默认已经有了axios，所以可以不用安装第一步，建立3个文件第一个文件App.vue 放在js/components目录下 <template> <div class=""> <div class="">vue demo</div> <router-
laravel+vue开发配置

Vue单页应用开发流程 (Laravel + Vue + Laravel-mix) 开发环境： Laravel : 5.4 Vue : 2.1.10 vue-router: 2.7.0 1.准备本篇文章默认你已经安装过Laravel,node,npm 运行npm install即可安装laravel-mix。如果失败的话请使用npm国内镜像。之后通过 cnpm install --save
laravel+vue

1.下载官方laravel composer create-project --prefer-dist laravel/laravel blog 2.安装 cnpm cnpm install platform unsupported laravel-mix@4.0.12 ? chokidar@2.0.4 ? fsevents@^1.2.2 Package require os(darwin
laravel 前端 vue 搭建

1. vue.js 安装 1.独立版本我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 2.使用CDN方法 BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js 3.NPM方法在用 Vue.js 构建大型应用时推荐
laravel+vue项目

laravel+vue项目手册地址:https://laravel-china.org/docs/laravel/5.6[中文文档] 手册地址:https://laravel.com/[英文文档] 熟悉基本命令操作下载laravel框架 |--composer create-project --prefer-dist laravel/laravel blog 数据库配置 1、修改.env文件
laravel5分页Pagination及扩展

Laravel 分页是很方便的一件事情，相对于其他PHP框架来说非常容易。但默认的分页样式往往不能满足我们日常的项目，通过谷歌搜索出来的搜索到的一些知识和结合自己的理解来展示一下Laravel自定义分页的实现 Laravel5默认分页在使用 Laravel 分页功能时，需要配合使用前端框架 Bootstrap 的分页组件，这两者结合甚为紧密。可是由于我的博客分页样式是自定义的，所以 CSS 类选
laravel对分页的paginate数据进行变更

因为是写接口,所以分页的数据有些用不到,因此直接取出需要的,另外,前端往往展示是跨表的,对于分页结果还需要进行提取出需要的字段,直接上代码,应该一看都明白了. public function index(Request $request) { $params = $request->validate([ 'search' => 'string', 'per_