Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Inertia Js Paginate
Route::get('/', function (\Illuminate\Http\Request $request) {
$initialSearch = $request->query('search', '');
$userQuery = User::query()
->when($request->filled('search'),function($query) use ($initialSearch){
$query->where('name','LIKE','%'.$initialSearch.'%')
->orWhere('email','LIKE','%'.$initialSearch.'%');
});
$users = $userQuery
->paginate(5)
->onEachSide(2)
->appends(request()->only(['search']));
$paginatedLinks = paginationLinks($users);
return Inertia::render('Welcome',compact('users','paginatedLinks','initialSearch'));
});
<template>
<layout title="Welcome">
<div class="w-2/3 mx-auto">
<TextField type="search" placeholder="Search…" v-model="search" />
<table class="text-left w-full border-collapse"> <!--Border collapse doesn't work on this site yet but it's available in newer tailwind versions -->
<thead>
<tr>
<th class="py-4 px-6 bg-grey-lightest font-bold uppercase text-sm text-grey-dark border-b border-grey-light">Name</th>
<th class="py-4 px-6 bg-grey-lightest font-bold uppercase text-sm text-grey-dark border-b border-grey-light">Email</th>
<th class="py-4 px-6 bg-grey-lightest font-bold uppercase text-sm text-grey-dark border-b border-grey-light">Actions</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-grey-lighter" v-for="user in users.data" v-bind:key="user.id">
<td class="py-4 px-6 border-b border-grey-light">{{user.name}}</td>
<td class="py-4 px-6 border-b border-grey-light">{{user.email}}</td>
<td class="py-4 px-6 border-b border-grey-light">
<InertiaLink :href="user.links.show" class="text-grey-lighter font-bold py-1 px-3 rounded text-xs bg-green hover:bg-green-dark">
Edit
</InertiaLink>
<a href="#" class="text-grey-lighter font-bold py-1 px-3 rounded text-xs bg-blue hover:bg-blue-dark">View</a>
</td>
</tr>
</tbody>
</table>
<links
:urlsArray="paginatedLinks"
:previousPageUrl="users.prev_page_url"
:nextPageUrl="users.next_page_url"
>
</links>
</div>
</layout>
</template>
<script>
import Layout from '@/Shared/Layout';
import Pagination from '@/Shared/Pagination';
import Links from '@/Shared/Links';
import TextField from '@/Shared/TextField';
import { stringify } from 'qs';
import debounce from 'lodash/debounce';
import { Inertia } from '@inertiajs/inertia';
export default {
components: {Layout,Pagination,Links,TextField},
props : {
"users" : {
type: Object,
},
"paginatedLinks" : {
type : Array,
},
"initialSearch" : {
type : String,
default: null,
}
},
data() {
return {
search: this.initialSearch
};
},
watch: {
search: debounce(function() {
const query = stringify({
search: this.search || undefined,
status: this.status || undefined
});
Inertia.visit(query ? `/?${query}` : '/', {
preserveScroll: true,
preserveState: true,
only: ['users','paginatedLinks'],
});
}, 250)
}
}
</script>
function paginationLinks(Illuminate\Contracts\Pagination\LengthAwarePaginator $lengthAwarePaginator)
{
$window = UrlWindow::make($lengthAwarePaginator);
$isCurrentPageSet = false;
// dd($lengthAwarePaginator->toArray());
$array = array_filter([
$window['first'],
is_array($window['slider']) ? '...' : null,
$window['slider'],
is_array($window['last']) ? '...' : null,
$window['last'],
]);
$i = 1;
foreach($array as $index => $urlsArray):
if(is_array($urlsArray)):
foreach($urlsArray as $pageNumber => $link):
$currentPage = $lengthAwarePaginator->currentPage();
$n[] = [
'pageNumber' => $pageNumber,
'url' => $link,
'indexKey' => $i,
'type' => 'URLS',
'isCurrentPage' => $currentPage === $pageNumber,
];
$i++;
endforeach;
elseif(is_string($urlsArray)):
$n[] = [
'url' => $urlsArray,
'indexKey' => $i,
'type' => 'ELIPSIS',
];
$i++;
endif;
endforeach;
return count($n) === 1 ? null : $n;
}
    <links
        :urlsArray="paginatedLinks"
        :previousPageUrl="users.prev_page_url"
        :nextPageUrl="users.next_page_url"
        >
        </links>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment