【发布时间】：2016-07-02 14:25:18
【问题描述】：
我有一个使用 vue js 和 laravel 的列表页面。在此页面中还包括过滤和排序功能。目前列出、排序和过滤工作正常。我需要在此列表页面中包含分页。我不知道如何包含这个我的客户需要这个。我在vue js方面没有太多经验。我当前的代码如下。您能否检查并帮助我整合分页？
版本为 vue js(1.0.25) 和 laravel(5.2)
dashboard.blade.php
@extends('layouts.app')
@section('title', 'Dashboard')
@section('style')
<style>
th.active .arrow {
opacity: 1;
}
.arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
}
.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #42b983;
}
.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #42b983;
}
#search {
margin-bottom: 10px;
}
</style>
@endsection
@section('content')
<div class="container">
<div class="row">
<h1 class="page-header">{{ trans('messages.customerListPageHeadingLabel') }}</h1>
<template id="grid-template">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}">@{{ heading[key] }} <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(index, customer) in customers | filterBy filterKey | orderBy sortKey sortOrders[sortKey]">
<td>@{{ customer.erp_id }}</td>
<td>@{{customer.firstname}}</td>
<td><a href="{{ url('/customer/details/') }}/@{{ customer.id }}">@{{customer.lastname}}</a></td>
<td>@{{customer.email}}</td>
<td>@{{customer.phone_1}}</td>
<td>@{{customer.status}}</td>
<td>@{{customer.created_on}}</td>
</tr>
</tbody>
</table>
</template>
<div id="app">
<div class="form-group col-md-4">
<form id="search" class="form-inline">
<label for="query">{{ trans('messages.customerListPageSearchBox') }} </label>
<input name="query" class="form-control" v-model="searchQuery">
</form>
</div>
<br>
<customer-grid :customers="{{$listCustomers}}" :columns="gridColumns" :heading="colTitles" :filter-key="searchQuery"></customer-grid>
</div>
</div>
</div>
@endsection
@push('script')
<!-- Vue Js -->
<script src="/assets/js/vue.js"></script>
<script src="/assets/js/vue-resource.js"></script>
<script>
Vue.component('customer-grid', {
template: '#grid-template',
props: {
customers: Array,
columns: Array,
filterKey: String,
heading:Object
},
data: function () {
var sortOrders = {}
this.columns.forEach(function (key) {
sortOrders[key] = 1
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
methods: {
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
}
}
})
// bootstrap the demo
var demo = new Vue({
el: '#app',
data: {
searchQuery: '',
gridColumns: ['erp_id', 'firstname', 'lastname', 'email', 'phone_1', 'status', 'created_on'],
gridData: null,
colTitles: {'erp_id':'@lang('messages.customerListPageTableCustomerNo')', 'firstname':'@lang('messages.customerListPageTableFirstname')', 'lastname':'@lang('messages.customerListPageTableLastname')', 'email':'E-Mail', 'phone_1':'@lang('messages.customerListPageTablePhone')', 'status':'Status', 'created_on':'@lang('messages.customerListPageTableAddedDate')'}
},
created: function() {
this.fetchData()
},
methods: {
fetchData: function () {
var self = this;
$.get('/', function( data ) {
self.gridData = data;
});
}
}
});
</script>
@endpush
routes.php
Route::get('/', ['as' => 'listCustomersPage', 'uses' => 'CustomerController@index']);
CustomerController.php
public function index()
{
$listCustomers = Customer::select('id', 'erp_id', 'firstname', 'lastname', 'email', 'phone_1', 'status', DB::raw("DATE_FORMAT(created_at, '%d.%m.%Y %H:%i') AS created_on"))
->orderBy('id', 'desc')
->get();
return view('dashboard', compact('listCustomers'));
/*return view('dashboard');*/
}
【问题讨论】：