Inertia Js Paginate

full.php

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

full.vue

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

links.vue

<template>
    <div>    
   <ul class="flex pl-0 list-none rounded my-2">
      <li 
         class="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-blue-700 border-r-0 ml-0 rounded-l hover:bg-gray-200"
         v-if="previousPageUrl"
         >
         <InertiaLink 
            :href="previousPageUrl" 
            class="page-link"
            >
            Prev
         </InertiaLink>
      </li>
      <li 
         class="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-blue-700 border-r-0 hover:bg-gray-200"
         v-for="eachUrlArray in urlsArray" 
         :key="eachUrlArray.indexKey"
         >
         <span v-if="eachUrlArray.type === 'URLS'">
            <InertiaLink 
               :href="eachUrlArray.url" 
                class="page-link" 
                :class="{ 'bg-blue-500 text-blue-700': eachUrlArray.isCurrentPage === true }"
               >
               {{eachUrlArray.pageNumber}}
            </InertiaLink>
         </span>
         <span v-else-if="eachUrlArray.type === 'ELIPSIS'">
         {{eachUrlArray.url}}
         </span>
      </li>
      <li 
         class="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-blue-700 rounded-r hover:bg-gray-200"
         v-if="nextPageUrl"
         >
         <InertiaLink 
            :href="nextPageUrl" 
            class="page-link"
            >
            Next
         </InertiaLink>
      </li>
   </ul>
</div>
</template>

<script>
export default {
    props : ['urlsArray','previousPageUrl','nextPageUrl'],
}
</script>

paginate.php

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

usage.md

    <links
        :urlsArray="paginatedLinks"
        :previousPageUrl="users.prev_page_url"
        :nextPageUrl="users.next_page_url"
        >
        </links>