Database: Pagination - Laravel 11.x - The PHP Framework For Web Artisans

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Database: Pagination - Laravel 11.x - The PHP Framework For Web Artisans</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <link rel="canonical" href="https://laravel.com/docs/11.x/pagination">  <meta name="title" content="Laravel - The PHP Framework For Web Artisans"> <meta name="description" content="Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.">  <meta property="og:type" content="website"> <meta property="og:url" content="https://laravel.com/"> <meta property="og:title" content="Laravel - The PHP Framework For Web Artisans"> <meta property="og:description" content="Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things."> <meta property="og:image" content="https://laravel.com/img/og-image.jpg">  <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://laravel.com/"> <meta property="twitter:title" content="Laravel - The PHP Framework For Web Artisans"> <meta property="twitter:description" content="Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things."> <meta property="twitter:image" content="https://laravel.com/img/og-image.jpg">  <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"> <link rel="manifest" href="/img/favicon/site.webmanifest"> <link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#ff2d20"> <link rel="shortcut icon" href="/img/favicon/favicon.ico"> <meta name="msapplication-TileColor" content="#ff2d20"> <meta name="msapplication-config" content="/img/favicon/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <meta name="color-scheme" content="light"> <link rel="preconnect" href="https://E3MIRNPJH5-dsn.algolia.net" crossorigin /> <link rel="stylesheet" href="https://use.typekit.net/ins2wgm.css"> <link rel="preload" as="style" href="https://laravel.com/build/assets/app-dc063eeb.css" /><link rel="modulepreload" href="https://laravel.com/build/assets/app-70a5a3a6.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/docs-45166933.js" /><link rel="stylesheet" href="https://laravel.com/build/assets/app-dc063eeb.css" /><script type="module" src="https://laravel.com/build/assets/app-70a5a3a6.js"></script><script type="module" src="https://laravel.com/build/assets/docs-45166933.js"></script>  <script src="https://cdn.usefathom.com/script.js" data-site="DVMEKBYF" defer></script>   <script async src="https://tag.clearbitscripts.com/v1/pk_97d2bf69f817feb07be42fcda1460119/tags.js" referrerpolicy="strict-origin-when-cross-origin"></script> <script> const alwaysLightMode = false; </script> <script> function updateTheme() { if (!('theme' in localStorage)) { localStorage.theme = 'system'; } switch (localStorage.theme) { case 'system': if (window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.classList.add('dark'); document.documentElement.setAttribute('data-theme', 'dark'); } else { document.documentElement.classList.remove('dark'); document.documentElement.setAttribute('data-theme', 'light'); } document.documentElement.setAttribute('color-theme', 'system'); break; case 'dark': document.documentElement.classList.add('dark'); document.documentElement.setAttribute('color-theme', 'dark'); document.documentElement.setAttribute('data-theme', 'dark'); break; case 'light': document.documentElement.classList.remove('dark'); document.documentElement.setAttribute('color-theme', 'light'); document.documentElement.setAttribute('data-theme', 'light'); break; } updateThemeAndSchemeColor(); } function updateThemeAndSchemeColor() { if (! alwaysLightMode) { if (document.documentElement.classList.contains('dark')) { document.querySelector('meta[name="color-scheme"]').setAttribute('content', 'dark'); document.querySelector('meta[name="theme-color"]').setAttribute('content', '#171923'); return; } document.querySelector('meta[name="color-scheme"]').setAttribute('content', 'light'); document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff'); } } updateTheme(); </script> </head> <body x-data="{ navIsOpen: false, }" class="w-full h-full font-sans antialiased text-gray-900 language-php" data-instant-intensity="0" > <a id="skip-to-content-link" href="#main-content" class="absolute bg-gray-100 px-4 py-2 top-3 left-3 text-gray-700 shadow-xl" > Skip to content </a> <div class="items-center justify-center bg-gradient-to-b from-red-500 to-red-600 p-2 text-center text-white text-sm h-9"> <template id="news-herd"> <div> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" stroke-linecap="round" fill="none" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M3 4m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z" /> <path d="M7 8v1" /> <path d="M17 8v1" /> <path d="M12.5 4c-.654 1.486 -1.26 3.443 -1.5 9h2.5c-.19 2.867 .094 5.024 .5 7" /> <path d="M7 15.5c3.667 2 6.333 2 10 0" /> </svg> </div> <div class="mt-px ml-1"> Get started with PHP and Laravel faster than ever using <a href="https://herd.laravel.com" class="underline">Laravel Herd</a>. </div> </template> <template id="news-laracon"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <div class="mt-px ml-1"> Join us in Dallas, TX! Tickets are now available for <a href="https://laracon.us" class="underline">Laracon US</a>. </div> </template> <template id="news-laracon-in"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <div class="mt-px ml-1"> Let's go to India! Tickets are now available for <a href="https://laracon.in" class="underline">Laracon IN</a>. </div> </template> <template id="news-laracon-eu"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <div class="mt-px ml-1"> Let's go to Europe! Tickets are now available for <a href="https://laracon.eu" class="underline">Laracon EU</a>. </div> </template> <template id="news-laracon-au"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <div class="mt-px ml-1"> Let's go down under! Tickets are now available for <a href="https://laracon.au" class="underline">Laracon AU</a>. </div> </template> <template id="news-forge"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></div> <div class="mt-px ml-1"> Servers with PHP 8.3 are now available for provisioning via <a href="https://forge.laravel.com" class="underline">Laravel Forge</a>. </div> </template> <template id="news-vapor"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path></svg></div> <div class="mt-px ml-1"> Deploy Laravel with the infinite scale of serverless using <a href="https://vapor.laravel.com" class="underline">Laravel Vapor</a>. </div> </template> <template id="news-cloud"> <div class="mt-px ml-1"> Join the waitlist for <a href="https://cloud.laravel.com" class="underline">Laravel Cloud</a><span class="hidden md:inline">, the future of shipping</span>. </div> </template> <template id="news-nightwatch"> <div class="mt-px ml-1"> Join the waitlist for <a href="https://nightwatch.laravel.com" class="underline">Laravel Nightwatch</a><span class="hidden md:inline">, first-class monitoring designed for Laravel</span>. </div> </template> <template id="news-pulse"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path></svg></div> <div class="mt-px ml-1"> How's your health? Check your application's vital signs using <a href="https://pulse.laravel.com" class="underline">Laravel Pulse</a>. </div> </template> <template id="news-reverb"> <div> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M3.707 6.293l2.586 -2.586a1 1 0 0 1 1.414 0l5.586 5.586a1 1 0 0 1 0 1.414l-2.586 2.586a1 1 0 0 1 -1.414 0l-5.586 -5.586a1 1 0 0 1 0 -1.414z" /> <path d="M6 10l-3 3l3 3l3 -3" /> <path d="M10 6l3 -3l3 3l-3 3" /> <path d="M12 12l1.5 1.5" /> <path d="M14.5 17a2.5 2.5 0 0 0 2.5 -2.5" /> <path d="M15 21a6 6 0 0 0 6 -6" /> </svg> </div> <div class="mt-px ml-1"> Incoming transmission received. <a href="https://reverb.laravel.com" class="underline">Laravel Reverb</a> is now available! </div> </template> <template id="news-nova"> <div> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path> </svg> </div> <div class="mt-px ml-1"> Take your administration backend to another dimension with <a href="https://nova.laravel.com" class="underline">Laravel Nova</a>. </div> </template> <template id="news-careers"> <div> <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z" /> </svg> </div> <div class="mt-px ml-1"> Laravel is hiring! <a href="https://laravel.com/careers" class="underline">Help us build the future of Laravel</a>. </div> </template> </div> <script> const activeNewsTemplate = document.getElementById( 'news-'+JSON.parse('[\u0022cloud\u0022,\u0022nightwatch\u0022]')[Math.floor(Math.random() * 2)] ) activeNewsTemplate.replaceWith(activeNewsTemplate.content) </script> <div class="relative dark:bg-dark-700" id="docsScreen"> <div class="relative lg:flex lg:items-start"> <aside class="hidden fixed top-0 bottom-0 left-0 z-20 w-16 bg-gradient-to-b from-gray-100 to-white transition-all duration-300 lg:sticky lg:w-80 lg:shrink-0 lg:flex lg:flex-col lg:justify-end lg:items-end 2xl:max-w-lg 2xl:w-full dark:from-dark-800 dark:to-dark-700"> <div class="relative max-h-screen overflow-auto flex-1 flex flex-col xl:w-80"> <a href="/" class="flex items-center py-8 px-4 lg:px-8 xl:px-16"> <img class="w-8 h-8 shrink-0 transition-all duration-300 lg:w-12 lg:h-12" src="/img/logomark.min.svg" alt="Laravel" width="50" height="52" > <img src="/img/logotype.min.svg" alt="Laravel" class="hidden ml-4 lg:block" width="114" height="29" > </a> <div class="px-4 pb-10 lg:px-8 xl:px-16"> <nav id="indexed-nav" class="hidden lg:block lg:mt-4"> <div class="docs_sidebar"> <ul> <li> <h2>Prologue</h2> <ul> <li> <a href="/docs/11.x/releases">Release Notes</a> </li> <li> <a href="/docs/11.x/upgrade">Upgrade Guide</a> </li> <li> <a href="/docs/11.x/contributions">Contribution Guide</a> </li> </ul> </li> <li> <h2>Getting Started</h2> <ul> <li> <a href="/docs/11.x/installation">Installation</a> </li> <li> <a href="/docs/11.x/configuration">Configuration</a> </li> <li> <a href="/docs/11.x/structure">Directory Structure</a> </li> <li> <a href="/docs/11.x/frontend">Frontend</a> </li> <li> <a href="/docs/11.x/starter-kits">Starter Kits</a> </li> <li> <a href="/docs/11.x/deployment">Deployment</a> </li> </ul> </li> <li> <h2>Architecture Concepts</h2> <ul> <li> <a href="/docs/11.x/lifecycle">Request Lifecycle</a> </li> <li> <a href="/docs/11.x/container">Service Container</a> </li> <li> <a href="/docs/11.x/providers">Service Providers</a> </li> <li> <a href="/docs/11.x/facades">Facades</a> </li> </ul> </li> <li> <h2>The Basics</h2> <ul> <li> <a href="/docs/11.x/routing">Routing</a> </li> <li> <a href="/docs/11.x/middleware">Middleware</a> </li> <li> <a href="/docs/11.x/csrf">CSRF Protection</a> </li> <li> <a href="/docs/11.x/controllers">Controllers</a> </li> <li> <a href="/docs/11.x/requests">Requests</a> </li> <li> <a href="/docs/11.x/responses">Responses</a> </li> <li> <a href="/docs/11.x/views">Views</a> </li> <li> <a href="/docs/11.x/blade">Blade Templates</a> </li> <li> <a href="/docs/11.x/vite">Asset Bundling</a> </li> <li> <a href="/docs/11.x/urls">URL Generation</a> </li> <li> <a href="/docs/11.x/session">Session</a> </li> <li> <a href="/docs/11.x/validation">Validation</a> </li> <li> <a href="/docs/11.x/errors">Error Handling</a> </li> <li> <a href="/docs/11.x/logging">Logging</a> </li> </ul> </li> <li> <h2>Digging Deeper</h2> <ul> <li> <a href="/docs/11.x/artisan">Artisan Console</a> </li> <li> <a href="/docs/11.x/broadcasting">Broadcasting</a> </li> <li> <a href="/docs/11.x/cache">Cache</a> </li> <li> <a href="/docs/11.x/collections">Collections</a> </li> <li> <a href="/docs/11.x/concurrency">Concurrency</a> </li> <li> <a href="/docs/11.x/context">Context</a> </li> <li> <a href="/docs/11.x/contracts">Contracts</a> </li> <li> <a href="/docs/11.x/events">Events</a> </li> <li> <a href="/docs/11.x/filesystem">File Storage</a> </li> <li> <a href="/docs/11.x/helpers">Helpers</a> </li> <li> <a href="/docs/11.x/http-client">HTTP Client</a> </li> <li> <a href="/docs/11.x/localization">Localization</a> </li> <li> <a href="/docs/11.x/mail">Mail</a> </li> <li> <a href="/docs/11.x/notifications">Notifications</a> </li> <li> <a href="/docs/11.x/packages">Package Development</a> </li> <li> <a href="/docs/11.x/processes">Processes</a> </li> <li> <a href="/docs/11.x/queues">Queues</a> </li> <li> <a href="/docs/11.x/rate-limiting">Rate Limiting</a> </li> <li> <a href="/docs/11.x/strings">Strings</a> </li> <li> <a href="/docs/11.x/scheduling">Task Scheduling</a> </li> </ul> </li> <li> <h2>Security</h2> <ul> <li> <a href="/docs/11.x/authentication">Authentication</a> </li> <li> <a href="/docs/11.x/authorization">Authorization</a> </li> <li> <a href="/docs/11.x/verification">Email Verification</a> </li> <li> <a href="/docs/11.x/encryption">Encryption</a> </li> <li> <a href="/docs/11.x/hashing">Hashing</a> </li> <li> <a href="/docs/11.x/passwords">Password Reset</a> </li> </ul> </li> <li class="sub--on"> <h2>Database</h2> <ul> <li> <a href="/docs/11.x/database">Getting Started</a> </li> <li> <a href="/docs/11.x/queries">Query Builder</a> </li> <li class="active"> <a href="/docs/11.x/pagination">Pagination</a> </li> <li> <a href="/docs/11.x/migrations">Migrations</a> </li> <li> <a href="/docs/11.x/seeding">Seeding</a> </li> <li> <a href="/docs/11.x/redis">Redis</a> </li> <li> <a href="/docs/11.x/mongodb">MongoDB</a> </li> </ul> </li> <li> <h2>Eloquent ORM</h2> <ul> <li> <a href="/docs/11.x/eloquent">Getting Started</a> </li> <li> <a href="/docs/11.x/eloquent-relationships">Relationships</a> </li> <li> <a href="/docs/11.x/eloquent-collections">Collections</a> </li> <li> <a href="/docs/11.x/eloquent-mutators">Mutators / Casts</a> </li> <li> <a href="/docs/11.x/eloquent-resources">API Resources</a> </li> <li> <a href="/docs/11.x/eloquent-serialization">Serialization</a> </li> <li> <a href="/docs/11.x/eloquent-factories">Factories</a> </li> </ul> </li> <li> <h2>Testing</h2> <ul> <li> <a href="/docs/11.x/testing">Getting Started</a> </li> <li> <a href="/docs/11.x/http-tests">HTTP Tests</a> </li> <li> <a href="/docs/11.x/console-tests">Console Tests</a> </li> <li> <a href="/docs/11.x/dusk">Browser Tests</a> </li> <li> <a href="/docs/11.x/database-testing">Database</a> </li> <li> <a href="/docs/11.x/mocking">Mocking</a> </li> </ul> </li> <li> <h2>Packages</h2> <ul> <li> <a href="/docs/11.x/starter-kits#laravel-breeze">Breeze</a> </li> <li> <a href="/docs/11.x/billing">Cashier (Stripe)</a> </li> <li> <a href="/docs/11.x/cashier-paddle">Cashier (Paddle)</a> </li> <li> <a href="/docs/11.x/dusk">Dusk</a> </li> <li> <a href="/docs/11.x/envoy">Envoy</a> </li> <li> <a href="/docs/11.x/fortify">Fortify</a> </li> <li> <a href="/docs/11.x/folio">Folio</a> </li> <li> <a href="/docs/11.x/homestead">Homestead</a> </li> <li> <a href="/docs/11.x/horizon">Horizon</a> </li> <li> <a href="https://jetstream.laravel.com">Jetstream</a> </li> <li> <a href="/docs/11.x/mix">Mix</a> </li> <li> <a href="/docs/11.x/octane">Octane</a> </li> <li> <a href="/docs/11.x/passport">Passport</a> </li> <li> <a href="/docs/11.x/pennant">Pennant</a> </li> <li> <a href="/docs/11.x/pint">Pint</a> </li> <li> <a href="/docs/11.x/precognition">Precognition</a> </li> <li> <a href="/docs/11.x/prompts">Prompts</a> </li> <li> <a href="/docs/11.x/pulse">Pulse</a> </li> <li> <a href="/docs/11.x/reverb">Reverb</a> </li> <li> <a href="/docs/11.x/sail">Sail</a> </li> <li> <a href="/docs/11.x/sanctum">Sanctum</a> </li> <li> <a href="/docs/11.x/scout">Scout</a> </li> <li> <a href="/docs/11.x/socialite">Socialite</a> </li> <li> <a href="/docs/11.x/telescope">Telescope</a> </li> <li> <a href="/docs/11.x/valet">Valet</a> </li> </ul> </li> <li> <a href="/api/11.x">API Documentation</a> </li> </ul> </div> </nav> <template id="promote-forge"> <div class="mt-4 px-3 py-2 border-dashed border-gray-200 border rounded-lg text-xs leading-loose text-gray-700 lg:block dark:border-gray-400 dark:text-gray-200"> <span class="font-medium">Laravel Forge:</span> create and manage PHP 8 servers. Deploy your Laravel applications in seconds. <a class="underline text-red-600" href="https://forge.laravel.com">Sign up now!</a>. </div> </template> <template id="promote-vapor"> <div class="mt-4 px-3 py-2 border-dashed border-gray-200 border rounded-lg text-xs leading-loose text-gray-700 lg:block dark:border-gray-400 dark:text-gray-200"> <span class="font-medium">Laravel Vapor:</span> experience extreme scale on a dedicated serverless platform for Laravel. <a class="underline text-red-600" href="https://vapor.laravel.com">Sign up now!</a>. </div> </template> <template id="promote-nova"> <div class="mt-4 px-3 py-2 border-dashed border-gray-200 border rounded-lg text-xs leading-loose text-gray-700 lg:block dark:border-gray-400 dark:text-gray-200"> <span class="font-medium">Laravel Nova:</span> The next generation of Nova is <a class="underline text-red-600" href="https://nova.laravel.com">now available</a>. </div> </template> <template id="promote-pulse"> <div class="mt-4 px-3 py-2 border-dashed border-gray-200 border rounded-lg text-xs leading-loose text-gray-700 lg:block dark:border-gray-400 dark:text-gray-200"> <span class="font-medium">Laravel Pulse:</span> How's your health? Check your application's vital signs using <a href="https://pulse.laravel.com" class="underline text-red-600">Laravel Pulse</a>. </div> </template> <template id="promote-reverb"> <div class="mt-4 px-3 py-2 border-dashed border-gray-200 border rounded-lg text-xs leading-loose text-gray-700 lg:block dark:border-gray-400 dark:text-gray-200"> <span class="font-medium">Laravel Reverb:</span> You can easily build dynamic, real-time Laravel applications using WebSockets. <a href="https://reverb.laravel.com" class="underline text-red-600">Laravel Reverb</a> is now available! </div> </template> <script> const activePromotionTemplate = document.getElementById( 'promote-'+JSON.parse('[\u0022forge\u0022,\u0022vapor\u0022,\u0022nova\u0022,\u0022pulse\u0022,\u0022reverb\u0022]')[Math.floor(Math.random() * 5)] ) activePromotionTemplate.replaceWith(activePromotionTemplate.content) </script> </div> </div> </aside> <header class="lg:hidden" @keydown.window.escape="navIsOpen = false" @click.away="navIsOpen = false" > <div class="relative mx-auto w-full py-10 bg-white transition duration-200 dark:bg-dark-700"> <div class="mx-auto px-8 sm:px-16 flex items-center justify-between"> <a href="/" class="flex items-center"> <img class="" src="/img/logomark.min.svg" alt="Laravel" width="50" height="52"> <img class="hidden ml-5 sm:block" src="/img/logotype.min.svg" alt="Laravel" width="114" height="29"> </a> <div class="flex-1 flex items-center justify-end"> <button id="header__sun" onclick="toSystemMode()" title="Switch to system theme" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <circle cx="12" cy="12" r="4"></circle> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path> </svg> </button> <button id="header__moon" onclick="toLightMode()" title="Switch to light mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /> </svg> </button> <button id="header__indeterminate" onclick="toDarkMode()" title="Switch to dark mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z" /> </svg> </button> <button class="ml-2 relative w-10 h-10 p-2 text-red-600 lg:hidden focus:outline-none focus:shadow-outline" aria-label="Menu" @click.prevent="navIsOpen = !navIsOpen"> <svg x-show="! navIsOpen" x-transition.opacity class="absolute inset-0 mt-2 ml-2 w-6 h-6" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> <svg x-show="navIsOpen" x-transition.opacity x-cloak class="absolute inset-0 mt-2 ml-2 w-6 h-6" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> </button> </div> </div> <span :class="{ 'shadow-sm': navIsOpen }" class="absolute inset-0 z-20 pointer-events-none"></span> </div> <div x-show="navIsOpen" x-transition:enter="duration-150" x-transition:leave="duration-100 ease-in" x-cloak > <nav x-show="navIsOpen" x-cloak class="absolute w-full transform origin-top shadow-sm z-10" x-transition:enter="duration-150 ease-out" x-transition:enter-start="opacity-0 -translate-y-8 scale-75" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 -translate-y-8 scale-75" > <div class="relative p-8 bg-white docs_sidebar dark:bg-dark-600"> <ul> <li> <h2>Prologue</h2> <ul> <li> <a href="/docs/11.x/releases">Release Notes</a> </li> <li> <a href="/docs/11.x/upgrade">Upgrade Guide</a> </li> <li> <a href="/docs/11.x/contributions">Contribution Guide</a> </li> </ul> </li> <li> <h2>Getting Started</h2> <ul> <li> <a href="/docs/11.x/installation">Installation</a> </li> <li> <a href="/docs/11.x/configuration">Configuration</a> </li> <li> <a href="/docs/11.x/structure">Directory Structure</a> </li> <li> <a href="/docs/11.x/frontend">Frontend</a> </li> <li> <a href="/docs/11.x/starter-kits">Starter Kits</a> </li> <li> <a href="/docs/11.x/deployment">Deployment</a> </li> </ul> </li> <li> <h2>Architecture Concepts</h2> <ul> <li> <a href="/docs/11.x/lifecycle">Request Lifecycle</a> </li> <li> <a href="/docs/11.x/container">Service Container</a> </li> <li> <a href="/docs/11.x/providers">Service Providers</a> </li> <li> <a href="/docs/11.x/facades">Facades</a> </li> </ul> </li> <li> <h2>The Basics</h2> <ul> <li> <a href="/docs/11.x/routing">Routing</a> </li> <li> <a href="/docs/11.x/middleware">Middleware</a> </li> <li> <a href="/docs/11.x/csrf">CSRF Protection</a> </li> <li> <a href="/docs/11.x/controllers">Controllers</a> </li> <li> <a href="/docs/11.x/requests">Requests</a> </li> <li> <a href="/docs/11.x/responses">Responses</a> </li> <li> <a href="/docs/11.x/views">Views</a> </li> <li> <a href="/docs/11.x/blade">Blade Templates</a> </li> <li> <a href="/docs/11.x/vite">Asset Bundling</a> </li> <li> <a href="/docs/11.x/urls">URL Generation</a> </li> <li> <a href="/docs/11.x/session">Session</a> </li> <li> <a href="/docs/11.x/validation">Validation</a> </li> <li> <a href="/docs/11.x/errors">Error Handling</a> </li> <li> <a href="/docs/11.x/logging">Logging</a> </li> </ul> </li> <li> <h2>Digging Deeper</h2> <ul> <li> <a href="/docs/11.x/artisan">Artisan Console</a> </li> <li> <a href="/docs/11.x/broadcasting">Broadcasting</a> </li> <li> <a href="/docs/11.x/cache">Cache</a> </li> <li> <a href="/docs/11.x/collections">Collections</a> </li> <li> <a href="/docs/11.x/concurrency">Concurrency</a> </li> <li> <a href="/docs/11.x/context">Context</a> </li> <li> <a href="/docs/11.x/contracts">Contracts</a> </li> <li> <a href="/docs/11.x/events">Events</a> </li> <li> <a href="/docs/11.x/filesystem">File Storage</a> </li> <li> <a href="/docs/11.x/helpers">Helpers</a> </li> <li> <a href="/docs/11.x/http-client">HTTP Client</a> </li> <li> <a href="/docs/11.x/localization">Localization</a> </li> <li> <a href="/docs/11.x/mail">Mail</a> </li> <li> <a href="/docs/11.x/notifications">Notifications</a> </li> <li> <a href="/docs/11.x/packages">Package Development</a> </li> <li> <a href="/docs/11.x/processes">Processes</a> </li> <li> <a href="/docs/11.x/queues">Queues</a> </li> <li> <a href="/docs/11.x/rate-limiting">Rate Limiting</a> </li> <li> <a href="/docs/11.x/strings">Strings</a> </li> <li> <a href="/docs/11.x/scheduling">Task Scheduling</a> </li> </ul> </li> <li> <h2>Security</h2> <ul> <li> <a href="/docs/11.x/authentication">Authentication</a> </li> <li> <a href="/docs/11.x/authorization">Authorization</a> </li> <li> <a href="/docs/11.x/verification">Email Verification</a> </li> <li> <a href="/docs/11.x/encryption">Encryption</a> </li> <li> <a href="/docs/11.x/hashing">Hashing</a> </li> <li> <a href="/docs/11.x/passwords">Password Reset</a> </li> </ul> </li> <li class="sub--on"> <h2>Database</h2> <ul> <li> <a href="/docs/11.x/database">Getting Started</a> </li> <li> <a href="/docs/11.x/queries">Query Builder</a> </li> <li class="active"> <a href="/docs/11.x/pagination">Pagination</a> </li> <li> <a href="/docs/11.x/migrations">Migrations</a> </li> <li> <a href="/docs/11.x/seeding">Seeding</a> </li> <li> <a href="/docs/11.x/redis">Redis</a> </li> <li> <a href="/docs/11.x/mongodb">MongoDB</a> </li> </ul> </li> <li> <h2>Eloquent ORM</h2> <ul> <li> <a href="/docs/11.x/eloquent">Getting Started</a> </li> <li> <a href="/docs/11.x/eloquent-relationships">Relationships</a> </li> <li> <a href="/docs/11.x/eloquent-collections">Collections</a> </li> <li> <a href="/docs/11.x/eloquent-mutators">Mutators / Casts</a> </li> <li> <a href="/docs/11.x/eloquent-resources">API Resources</a> </li> <li> <a href="/docs/11.x/eloquent-serialization">Serialization</a> </li> <li> <a href="/docs/11.x/eloquent-factories">Factories</a> </li> </ul> </li> <li> <h2>Testing</h2> <ul> <li> <a href="/docs/11.x/testing">Getting Started</a> </li> <li> <a href="/docs/11.x/http-tests">HTTP Tests</a> </li> <li> <a href="/docs/11.x/console-tests">Console Tests</a> </li> <li> <a href="/docs/11.x/dusk">Browser Tests</a> </li> <li> <a href="/docs/11.x/database-testing">Database</a> </li> <li> <a href="/docs/11.x/mocking">Mocking</a> </li> </ul> </li> <li> <h2>Packages</h2> <ul> <li> <a href="/docs/11.x/starter-kits#laravel-breeze">Breeze</a> </li> <li> <a href="/docs/11.x/billing">Cashier (Stripe)</a> </li> <li> <a href="/docs/11.x/cashier-paddle">Cashier (Paddle)</a> </li> <li> <a href="/docs/11.x/dusk">Dusk</a> </li> <li> <a href="/docs/11.x/envoy">Envoy</a> </li> <li> <a href="/docs/11.x/fortify">Fortify</a> </li> <li> <a href="/docs/11.x/folio">Folio</a> </li> <li> <a href="/docs/11.x/homestead">Homestead</a> </li> <li> <a href="/docs/11.x/horizon">Horizon</a> </li> <li> <a href="https://jetstream.laravel.com">Jetstream</a> </li> <li> <a href="/docs/11.x/mix">Mix</a> </li> <li> <a href="/docs/11.x/octane">Octane</a> </li> <li> <a href="/docs/11.x/passport">Passport</a> </li> <li> <a href="/docs/11.x/pennant">Pennant</a> </li> <li> <a href="/docs/11.x/pint">Pint</a> </li> <li> <a href="/docs/11.x/precognition">Precognition</a> </li> <li> <a href="/docs/11.x/prompts">Prompts</a> </li> <li> <a href="/docs/11.x/pulse">Pulse</a> </li> <li> <a href="/docs/11.x/reverb">Reverb</a> </li> <li> <a href="/docs/11.x/sail">Sail</a> </li> <li> <a href="/docs/11.x/sanctum">Sanctum</a> </li> <li> <a href="/docs/11.x/scout">Scout</a> </li> <li> <a href="/docs/11.x/socialite">Socialite</a> </li> <li> <a href="/docs/11.x/telescope">Telescope</a> </li> <li> <a href="/docs/11.x/valet">Valet</a> </li> </ul> </li> <li> <a href="/api/11.x">API Documentation</a> </li> </ul> </div> </nav> </div> </header> <section class="flex-1 dark:bg-dark-700"> <div class="max-w-screen-lg px-8 sm:px-16 lg:px-24"> <div class="flex flex-col items-end border-b border-gray-200 py-1 transition-colors dark:border-gray-700 lg:mt-8 lg:flex-row-reverse"> <div class="hidden lg:flex items-center justify-center ml-8"> <button id="header__sun" onclick="toSystemMode()" title="Switch to system theme" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <circle cx="12" cy="12" r="4"></circle> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path> </svg> </button> <button id="header__moon" onclick="toLightMode()" title="Switch to light mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /> </svg> </button> <button id="header__indeterminate" onclick="toDarkMode()" title="Switch to dark mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z" /> </svg> </button> </div> <div class="w-full lg:w-40 lg:pl-12"> <div> <label class="text-gray-600 text-xs tracking-widest uppercase dark:text-gray-500" for="version-switcher">Version</label> <div x-data class="relative w-full bg-white transition-all duration-500 focus-within:border-gray-600 dark:bg-gray-800"> <select id="version-switcher" aria-label="Laravel version" class="appearance-none flex-1 w-full px-0 py-1 placeholder-gray-900 tracking-wide bg-white border-transparent focus:outline-none dark:bg-dark-700 dark:text-gray-400 dark:placeholder-gray-500" @change="window.location = $event.target.value" > <option value="https://laravel.com/docs/master/pagination">Master</option> <option selected value="https://laravel.com/docs/11.x/pagination">11.x</option> <option value="https://laravel.com/docs/10.x/pagination">10.x</option> <option value="https://laravel.com/docs/9.x/pagination">9.x</option> <option value="https://laravel.com/docs/8.x/pagination">8.x</option> <option value="https://laravel.com/docs/7.x/pagination">7.x</option> <option value="https://laravel.com/docs/6.x/pagination">6.x</option> <option value="https://laravel.com/docs/5.8/pagination">5.8</option> <option value="https://laravel.com/docs/5.7/pagination">5.7</option> <option value="https://laravel.com/docs/5.6/pagination">5.6</option> <option value="https://laravel.com/docs/5.5/pagination">5.5</option> <option value="https://laravel.com/docs/5.4/pagination">5.4</option> <option value="https://laravel.com/docs/5.3/pagination">5.3</option> <option value="https://laravel.com/docs/5.2/pagination">5.2</option> <option value="https://laravel.com/docs/5.1/pagination">5.1</option> <option value="https://laravel.com/docs/5.0/pagination">5.0</option> <option value="https://laravel.com/docs/4.2/pagination">4.2</option> </select> <img class="absolute inset-y-0 right-0 mt-2.5 w-2.5 h-2.5 text-gray-900 pointer-events-none dark:hidden" src="/img/icons/drop_arrow.min.svg" alt="" width="10" height="10"> <img class="absolute inset-y-0 right-0 mt-2.5 w-2.5 h-2.5 text-gray-900 pointer-events-none hidden dark:block" src="/img/icons/drop_arrow.dark.min.svg" alt="" width="10" height="10"> </div> </div> </div> <div class="relative mt-8 flex items-center justify-end w-full h-10 lg:mt-0"> <div class="flex-1 flex items-center"> <button id="docsearch" class="text-gray-800 transition-colors dark:text-gray-400 w-full"></button> </div> </div> </div> <section class="mt-8 md:mt-16"> <section class="docs_main max-w-prose"> <div id="main-content"> <h1>Database: Pagination</h1> <ul> <li> <a href="#introduction">Introduction</a> </li> <li> <a href="#basic-usage">Basic Usage</a> <ul> <li> <a href="#paginating-query-builder-results">Paginating Query Builder Results</a> </li> <li> <a href="#paginating-eloquent-results">Paginating Eloquent Results</a> </li> <li> <a href="#cursor-pagination">Cursor Pagination</a> </li> <li> <a href="#manually-creating-a-paginator">Manually Creating a Paginator</a> </li> <li> <a href="#customizing-pagination-urls">Customizing Pagination URLs</a> </li> </ul> </li> <li> <a href="#displaying-pagination-results">Displaying Pagination Results</a> <ul> <li> <a href="#adjusting-the-pagination-link-window">Adjusting the Pagination Link Window</a> </li> <li> <a href="#converting-results-to-json">Converting Results to JSON</a> </li> </ul> </li> <li> <a href="#customizing-the-pagination-view">Customizing the Pagination View</a> <ul> <li> <a href="#using-bootstrap">Using Bootstrap</a> </li> </ul> </li> <li> <a href="#paginator-instance-methods">Paginator and LengthAwarePaginator Instance Methods</a> </li> <li> <a href="#cursor-paginator-instance-methods">Cursor Paginator Instance Methods</a> </li> </ul> <h2 id="introduction"><a href="#introduction">Introduction</a></h2> <p>In other frameworks, pagination can be very painful. We hope Laravel's approach to pagination will be a breath of fresh air. Laravel's paginator is integrated with the <a href="/docs/11.x/queries">query builder</a> and <a href="/docs/11.x/eloquent">Eloquent ORM</a> and provides convenient, easy-to-use pagination of database records with zero configuration.</p> <p>By default, the HTML generated by the paginator is compatible with the <a href="https://tailwindcss.com/">Tailwind CSS framework</a>; however, Bootstrap pagination support is also available.</p> <h4 id="tailwind-jit"><a href="#tailwind-jit">Tailwind JIT</a></h4> <p>If you are using Laravel's default Tailwind pagination views and the Tailwind JIT engine, you should ensure your application's <code>tailwind.config.js</code> file's <code>content</code> key references Laravel's pagination views so that their Tailwind classes are not purged:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="js" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #BFC7D5;">content: [</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">./resources/**/*.blade.php</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">./resources/**/*.js</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">./resources/**/*.vue</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;">],</span></div></code></pre> </div> <h2 id="basic-usage"><a href="#basic-usage">Basic Usage</a></h2> <h3 id="paginating-query-builder-results"><a href="#paginating-query-builder-results">Paginating Query Builder Results</a></h3> <p>There are several ways to paginate items. The simplest is by using the <code>paginate</code> method on the <a href="/docs/11.x/queries">query builder</a> or an <a href="/docs/11.x/eloquent">Eloquent query</a>. The <code>paginate</code> method automatically takes care of setting the query's "limit" and "offset" based on the current page being viewed by the user. By default, the current page is detected by the value of the <code>page</code> query string argument on the HTTP request. This value is automatically detected by Laravel, and is also automatically inserted into links generated by the paginator.</p> <p>In this example, the only argument passed to the <code>paginate</code> method is the number of items you would like displayed "per page". In this case, let's specify that we would like to display <code>15</code> items per page:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #D3423E;"><?php</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> App\Http\Controllers;</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Http\Controllers\</span><span style="color: #FFCB8B;">Controller</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">DB</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\View\</span><span style="color: #FFCB8B;">View</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">UserController</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">Controller</span></div><div class='line'><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color: #697098;"> * Show all application users.</span></div><div class='line'><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">index</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">View</span></div><div class='line'><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">view</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user.index</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">[</span></div><div class='line'><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">users</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #FFCB8B;">DB</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">table</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">users</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">paginate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">]);</span></div><div class='line'><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color: #BFC7D5;">}</span></div></code></pre> <h4 id="simple-pagination"><a href="#simple-pagination">Simple Pagination</a></h4> <p>The <code>paginate</code> method counts the total number of records matched by the query before retrieving the records from the database. This is done so that the paginator knows how many pages of records there are in total. However, if you do not plan to show the total number of pages in your application's UI then the record count query is unnecessary.</p> <p>Therefore, if you only need to display simple "Next" and "Previous" links in your application's UI, you may use the <code>simplePaginate</code> method to perform a single, efficient query:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">DB</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">table</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">users</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">simplePaginate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">);</span></div></code></pre> <h3 id="paginating-eloquent-results"><a href="#paginating-eloquent-results">Paginating Eloquent Results</a></h3> <p>You may also paginate <a href="/docs/11.x/eloquent">Eloquent</a> queries. In this example, we will paginate the <code>App\Models\User</code> model and indicate that we plan to display 15 records per page. As you can see, the syntax is nearly identical to paginating query builder results:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Models\</span><span style="color: #FFCB8B;">User</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">paginate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">);</span></div></code></pre> <p>Of course, you may call the <code>paginate</code> method after setting other constraints on the query, such as <code>where</code> clauses:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">where</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">votes</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">></span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">100</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">paginate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">);</span></div></code></pre> <p>You may also use the <code>simplePaginate</code> method when paginating Eloquent models:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">where</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">votes</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">></span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">100</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">simplePaginate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">);</span></div></code></pre> <p>Similarly, you may use the <code>cursorPaginate</code> method to cursor paginate Eloquent models:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">where</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">votes</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">></span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">100</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">cursorPaginate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">);</span></div></code></pre> <h4 id="multiple-paginator-instances-per-page"><a href="#multiple-paginator-instances-per-page">Multiple Paginator Instances per Page</a></h4> <p>Sometimes you may need to render two separate paginators on a single screen that is rendered by your application. However, if both paginator instances use the <code>page</code> query string parameter to store the current page, the two paginator's will conflict. To resolve this conflict, you may pass the name of the query string parameter you wish to use to store the paginator's current page via the third argument provided to the <code>paginate</code>, <code>simplePaginate</code>, and <code>cursorPaginate</code> methods:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Models\</span><span style="color: #FFCB8B;">User</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">where</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">votes</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">></span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #F78C6C;">100</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">paginate</span><span style="color: #BFC7D5;">(</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$perPage</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$columns</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">*</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">], </span><span style="color: #BEC5D4;">$pageName</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">users</span><span style="color: #D9F5DD;">'</span></div><div class='line'><span style="color: #BFC7D5;">);</span></div></code></pre> <h3 id="cursor-pagination"><a href="#cursor-pagination">Cursor Pagination</a></h3> <p>While <code>paginate</code> and <code>simplePaginate</code> create queries using the SQL "offset" clause, cursor pagination works by constructing "where" clauses that compare the values of the ordered columns contained in the query, providing the most efficient database performance available amongst all of Laravel's pagination methods. This method of pagination is particularly well-suited for large data-sets and "infinite" scrolling user interfaces.</p> <p>Unlike offset based pagination, which includes a page number in the query string of the URLs generated by the paginator, cursor based pagination places a "cursor" string in the query string. The cursor is an encoded string containing the location that the next paginated query should start paginating and the direction that it should paginate:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="nothing" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #BFC7D5;">http://localhost/users?cursor=eyJpZCI6MTUsIl9wb2ludHNUb05leHRJdGVtcyI6dHJ1ZX0</span></div></code></pre> </div> <p>You may create a cursor based paginator instance via the <code>cursorPaginate</code> method offered by the query builder. This method returns an instance of <code>Illuminate\Pagination\CursorPaginator</code>:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">DB</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">table</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">users</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">orderBy</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">id</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">cursorPaginate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">);</span></div></code></pre> <p>Once you have retrieved a cursor paginator instance, you may <a href="#displaying-pagination-results">display the pagination results</a> as you typically would when using the <code>paginate</code> and <code>simplePaginate</code> methods. For more information on the instance methods offered by the cursor paginator, please consult the <a href="#cursor-paginator-instance-methods">cursor paginator instance method documentation</a>.</p> <div class="mb-10 max-w-2xl mx-auto px-4 py-8 shadow-lg lg:flex lg:items-center callout"> <div class="w-20 h-20 mb-6 flex items-center justify-center shrink-0 lg:mb-0 bg-red-600"> <div class="opacity-75"><svg width="6" height="35" viewBox="0 0 6 35" xmlns="http://www.w3.org/2000/svg"><title>exclamation</title><path d="M0 29h6v6H0v-6zM0 0h6v24H0V0z" fill="#FFF" fill-rule="nonzero"/></svg> </div> </div> <p class="mb-0 lg:ml-6 callout"> Your query must contain an "order by" clause in order to take advantage of cursor pagination. In addition, the columns that the query are ordered by must belong to the table you are paginating.</p> </div> <h4 id="cursor-vs-offset-pagination"><a href="#cursor-vs-offset-pagination">Cursor vs. Offset Pagination</a></h4> <p>To illustrate the differences between offset pagination and cursor pagination, let's examine some example SQL queries. Both of the following queries will both display the "second page" of results for a <code>users</code> table ordered by <code>id</code>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="sql" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #BFC7D5;"># Offset Pagination...</span></div><div class='line'><span style="color: #C792EA;">select</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">*</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">from</span><span style="color: #BFC7D5;"> users </span><span style="color: #C792EA;">order by</span><span style="color: #BFC7D5;"> id </span><span style="color: #C792EA;">asc</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">limit</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;"> offset </span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #BFC7D5;"># </span><span style="color: #C792EA;">Cursor</span><span style="color: #BFC7D5;"> Pagination...</span></div><div class='line'><span style="color: #C792EA;">select</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">*</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">from</span><span style="color: #BFC7D5;"> users </span><span style="color: #C792EA;">where</span><span style="color: #BFC7D5;"> id </span><span style="color: #C792EA;">></span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">order by</span><span style="color: #BFC7D5;"> id </span><span style="color: #C792EA;">asc</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">limit</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">;</span></div></code></pre> </div> <p>The cursor pagination query offers the following advantages over offset pagination:</p> <ul> <li>For large data-sets, cursor pagination will offer better performance if the "order by" columns are indexed. This is because the "offset" clause scans through all previously matched data.</li> <li>For data-sets with frequent writes, offset pagination may skip records or show duplicates if results have been recently added to or deleted from the page a user is currently viewing.</li> </ul> <p>However, cursor pagination has the following limitations:</p> <ul> <li>Like <code>simplePaginate</code>, cursor pagination can only be used to display "Next" and "Previous" links and does not support generating links with page numbers.</li> <li>It requires that the ordering is based on at least one unique column or a combination of columns that are unique. Columns with <code>null</code> values are not supported.</li> <li>Query expressions in "order by" clauses are supported only if they are aliased and added to the "select" clause as well.</li> <li>Query expressions with parameters are not supported.</li> </ul> <h3 id="manually-creating-a-paginator"><a href="#manually-creating-a-paginator">Manually Creating a Paginator</a></h3> <p>Sometimes you may wish to create a pagination instance manually, passing it an array of items that you already have in memory. You may do so by creating either an <code>Illuminate\Pagination\Paginator</code>, <code>Illuminate\Pagination\LengthAwarePaginator</code> or <code>Illuminate\Pagination\CursorPaginator</code> instance, depending on your needs.</p> <p>The <code>Paginator</code> and <code>CursorPaginator</code> classes do not need to know the total number of items in the result set; however, because of this, these classes do not have methods for retrieving the index of the last page. The <code>LengthAwarePaginator</code> accepts almost the same arguments as the <code>Paginator</code>; however, it requires a count of the total number of items in the result set.</p> <p>In other words, the <code>Paginator</code> corresponds to the <code>simplePaginate</code> method on the query builder, the <code>CursorPaginator</code> corresponds to the <code>cursorPaginate</code> method, and the <code>LengthAwarePaginator</code> corresponds to the <code>paginate</code> method.</p> <div class="mb-10 max-w-2xl mx-auto px-4 py-8 shadow-lg lg:flex lg:items-center callout"> <div class="w-20 h-20 mb-6 flex items-center justify-center shrink-0 lg:mb-0 bg-red-600"> <div class="opacity-75"><svg width="6" height="35" viewBox="0 0 6 35" xmlns="http://www.w3.org/2000/svg"><title>exclamation</title><path d="M0 29h6v6H0v-6zM0 0h6v24H0V0z" fill="#FFF" fill-rule="nonzero"/></svg> </div> </div> <p class="mb-0 lg:ml-6 callout"> When manually creating a paginator instance, you should manually "slice" the array of results you pass to the paginator. If you're unsure how to do this, check out the <a href="https://secure.php.net/manual/en/function.array-slice.php">array_slice</a> PHP function.</p> </div> <h3 id="customizing-pagination-urls"><a href="#customizing-pagination-urls">Customizing Pagination URLs</a></h3> <p>By default, links generated by the paginator will match the current request's URI. However, the paginator's <code>withPath</code> method allows you to customize the URI used by the paginator when generating links. For example, if you want the paginator to generate links like <code>http://example.com/admin/users?page=N</code>, you should pass <code>/admin/users</code> to the <code>withPath</code> method:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Models\</span><span style="color: #FFCB8B;">User</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #FFCB8B;">Route</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">get</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/users</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">()</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">paginate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">);</span></div><div class='line'> </div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$users</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">withPath</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/admin/users</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'> </div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color: #BFC7D5;">});</span></div></code></pre> <h4 id="appending-query-string-values"><a href="#appending-query-string-values">Appending Query String Values</a></h4> <p>You may append to the query string of pagination links using the <code>appends</code> method. For example, to append <code>sort=votes</code> to each pagination link, you should make the following call to <code>appends</code>:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Models\</span><span style="color: #FFCB8B;">User</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #FFCB8B;">Route</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">get</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/users</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">()</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">paginate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">);</span></div><div class='line'> </div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$users</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">appends</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">sort</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">votes</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div><div class='line'> </div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color: #BFC7D5;">});</span></div></code></pre> <p>You may use the <code>withQueryString</code> method if you would like to append all of the current request's query string values to the pagination links:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">paginate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">withQueryString</span><span style="color: #BFC7D5;">();</span></div></code></pre> <h4 id="appending-hash-fragments"><a href="#appending-hash-fragments">Appending Hash Fragments</a></h4> <p>If you need to append a "hash fragment" to URLs generated by the paginator, you may use the <code>fragment</code> method. For example, to append <code>#users</code> to the end of each pagination link, you should invoke the <code>fragment</code> method like so:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">paginate</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">fragment</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">users</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div></code></pre> <h2 id="displaying-pagination-results"><a href="#displaying-pagination-results">Displaying Pagination Results</a></h2> <p>When calling the <code>paginate</code> method, you will receive an instance of <code>Illuminate\Pagination\LengthAwarePaginator</code>, while calling the <code>simplePaginate</code> method returns an instance of <code>Illuminate\Pagination\Paginator</code>. And, finally, calling the <code>cursorPaginate</code> method returns an instance of <code>Illuminate\Pagination\CursorPaginator</code>.</p> <p>These objects provide several methods that describe the result set. In addition to these helper methods, the paginator instances are iterators and may be looped as an array. So, once you have retrieved the results, you may display the results and render the page links using <a href="/docs/11.x/blade">Blade</a>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">container</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@foreach </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->name</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endforeach</span></div><div class='line'><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'> </div><div class='line'><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$users</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">links</span><span style="color: #BFC7D5;">() </span><span style="color: #89DDFF;">}}</span></div></code></pre> </div> <p>The <code>links</code> method will render the links to the rest of the pages in the result set. Each of these links will already contain the proper <code>page</code> query string variable. Remember, the HTML generated by the <code>links</code> method is compatible with the <a href="https://tailwindcss.com">Tailwind CSS framework</a>.</p> <h3 id="adjusting-the-pagination-link-window"><a href="#adjusting-the-pagination-link-window">Adjusting the Pagination Link Window</a></h3> <p>When the paginator displays pagination links, the current page number is displayed as well as links for the three pages before and after the current page. Using the <code>onEachSide</code> method, you may control how many additional links are displayed on each side of the current page within the middle, sliding window of links generated by the paginator:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$users</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">onEachSide</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">5</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">links</span><span style="color: #BFC7D5;">() </span><span style="color: #89DDFF;">}}</span></div></code></pre> </div> <h3 id="converting-results-to-json"><a href="#converting-results-to-json">Converting Results to JSON</a></h3> <p>The Laravel paginator classes implement the <code>Illuminate\Contracts\Support\Jsonable</code> Interface contract and expose the <code>toJson</code> method, so it's very easy to convert your pagination results to JSON. You may also convert a paginator instance to JSON by returning it from a route or controller action:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Models\</span><span style="color: #FFCB8B;">User</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #FFCB8B;">Route</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">get</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/users</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">()</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">User</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">paginate</span><span style="color: #BFC7D5;">();</span></div><div class='line'><span style="color: #BFC7D5;">});</span></div></code></pre> <p>The JSON from the paginator will include meta information such as <code>total</code>, <code>current_page</code>, <code>last_page</code>, and more. The result records are available via the <code>data</code> key in the JSON array. Here is an example of the JSON created by returning a paginator instance from a route:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">total</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">: </span><span style="color: #F78C6C;">50</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">per_page</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">: </span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">current_page</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">: </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">last_page</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">: </span><span style="color: #F78C6C;">4</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">first_page_url</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">: </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">http://laravel.app?page=1</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">last_page_url</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">: </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">http://laravel.app?page=4</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">next_page_url</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">: </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">http://laravel.app?page=2</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">prev_page_url</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">: </span><span style="color: #82AAFF;">null</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">path</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">: </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">http://laravel.app</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">from</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">: </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">to</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">: </span><span style="color: #F78C6C;">15</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">data</span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">:[</span></div><div class='line'><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> Record...</span></div><div class='line'><span style="color: #BFC7D5;"> },</span></div><div class='line'><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> Record...</span></div><div class='line'><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color: #BFC7D5;"> ]</span></div><div class='line'><span style="color: #BFC7D5;">}</span></div></code></pre> <h2 id="customizing-the-pagination-view"><a href="#customizing-the-pagination-view">Customizing the Pagination View</a></h2> <p>By default, the views rendered to display the pagination links are compatible with the <a href="https://tailwindcss.com">Tailwind CSS</a> framework. However, if you are not using Tailwind, you are free to define your own views to render these links. When calling the <code>links</code> method on a paginator instance, you may pass the view name as the first argument to the method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$paginator</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">links</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">view.name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">) </span><span style="color: #89DDFF;">}}</span></div><div class='line'> </div><div class='line'><span style="color: #697098;"></span></div><div class='line'><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$paginator</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">links</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">view.name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">foo</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">bar</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]) </span><span style="color: #89DDFF;">}}</span></div></code></pre> </div> <p>However, the easiest way to customize the pagination views is by exporting them to your <code>resources/views/vendor</code> directory using the <code>vendor:publish</code> command:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">vendor:publish</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">--tag=laravel-pagination</span></div></code></pre> </div> <p>This command will place the views in your application's <code>resources/views/vendor/pagination</code> directory. The <code>tailwind.blade.php</code> file within this directory corresponds to the default pagination view. You may edit this file to modify the pagination HTML.</p> <p>If you would like to designate a different file as the default pagination view, you may invoke the paginator's <code>defaultView</code> and <code>defaultSimpleView</code> methods within the <code>boot</code> method of your <code>App\Providers\AppServiceProvider</code> class:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #D3423E;"><?php</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> App\Providers;</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Pagination\</span><span style="color: #FFCB8B;">Paginator</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\</span><span style="color: #FFCB8B;">ServiceProvider</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">AppServiceProvider</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">ServiceProvider</span></div><div class='line'><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color: #697098;"> * Bootstrap any application services.</span></div><div class='line'><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Paginator</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">defaultView</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">view-name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'> </div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Paginator</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">defaultSimpleView</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">view-name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color: #BFC7D5;">}</span></div></code></pre> <h3 id="using-bootstrap"><a href="#using-bootstrap">Using Bootstrap</a></h3> <p>Laravel includes pagination views built using <a href="https://getbootstrap.com/">Bootstrap CSS</a>. To use these views instead of the default Tailwind views, you may call the paginator's <code>useBootstrapFour</code> or <code>useBootstrapFive</code> methods within the <code>boot</code> method of your <code>App\Providers\AppServiceProvider</code> class:</p> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Pagination\</span><span style="color: #FFCB8B;">Paginator</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #697098;">/**</span></div><div class='line'><span style="color: #697098;"> * Bootstrap any application services.</span></div><div class='line'><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Paginator</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">useBootstrapFive</span><span style="color: #BFC7D5;">();</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Paginator</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">useBootstrapFour</span><span style="color: #BFC7D5;">();</span></div><div class='line'><span style="color: #BFC7D5;">}</span></div></code></pre> <h2 id="paginator-instance-methods"><a href="#paginator-instance-methods">Paginator / LengthAwarePaginator Instance Methods</a></h2> <p>Each paginator instance provides additional pagination information via the following methods:</p> <div class="overflow-auto"> <table> <thead> <tr> <th>Method</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>$paginator->count()</code></td> <td>Get the number of items for the current page.</td> </tr> <tr> <td><code>$paginator->currentPage()</code></td> <td>Get the current page number.</td> </tr> <tr> <td><code>$paginator->firstItem()</code></td> <td>Get the result number of the first item in the results.</td> </tr> <tr> <td><code>$paginator->getOptions()</code></td> <td>Get the paginator options.</td> </tr> <tr> <td><code>$paginator->getUrlRange($start, $end)</code></td> <td>Create a range of pagination URLs.</td> </tr> <tr> <td><code>$paginator->hasPages()</code></td> <td>Determine if there are enough items to split into multiple pages.</td> </tr> <tr> <td><code>$paginator->hasMorePages()</code></td> <td>Determine if there are more items in the data store.</td> </tr> <tr> <td><code>$paginator->items()</code></td> <td>Get the items for the current page.</td> </tr> <tr> <td><code>$paginator->lastItem()</code></td> <td>Get the result number of the last item in the results.</td> </tr> <tr> <td><code>$paginator->lastPage()</code></td> <td>Get the page number of the last available page. (Not available when using <code>simplePaginate</code>).</td> </tr> <tr> <td><code>$paginator->nextPageUrl()</code></td> <td>Get the URL for the next page.</td> </tr> <tr> <td><code>$paginator->onFirstPage()</code></td> <td>Determine if the paginator is on the first page.</td> </tr> <tr> <td><code>$paginator->perPage()</code></td> <td>The number of items to be shown per page.</td> </tr> <tr> <td><code>$paginator->previousPageUrl()</code></td> <td>Get the URL for the previous page.</td> </tr> <tr> <td><code>$paginator->total()</code></td> <td>Determine the total number of matching items in the data store. (Not available when using <code>simplePaginate</code>).</td> </tr> <tr> <td><code>$paginator->url($page)</code></td> <td>Get the URL for a given page number.</td> </tr> <tr> <td><code>$paginator->getPageName()</code></td> <td>Get the query string variable used to store the page.</td> </tr> <tr> <td><code>$paginator->setPageName($name)</code></td> <td>Set the query string variable used to store the page.</td> </tr> <tr> <td><code>$paginator->through($callback)</code></td> <td>Transform each item using a callback.</td> </tr> </tbody> </table> </div> <h2 id="cursor-paginator-instance-methods"><a href="#cursor-paginator-instance-methods">Cursor Paginator Instance Methods</a></h2> <p>Each cursor paginator instance provides additional pagination information via the following methods:</p> <div class="overflow-auto"> <table> <thead> <tr> <th>Method</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>$paginator->count()</code></td> <td>Get the number of items for the current page.</td> </tr> <tr> <td><code>$paginator->cursor()</code></td> <td>Get the current cursor instance.</td> </tr> <tr> <td><code>$paginator->getOptions()</code></td> <td>Get the paginator options.</td> </tr> <tr> <td><code>$paginator->hasPages()</code></td> <td>Determine if there are enough items to split into multiple pages.</td> </tr> <tr> <td><code>$paginator->hasMorePages()</code></td> <td>Determine if there are more items in the data store.</td> </tr> <tr> <td><code>$paginator->getCursorName()</code></td> <td>Get the query string variable used to store the cursor.</td> </tr> <tr> <td><code>$paginator->items()</code></td> <td>Get the items for the current page.</td> </tr> <tr> <td><code>$paginator->nextCursor()</code></td> <td>Get the cursor instance for the next set of items.</td> </tr> <tr> <td><code>$paginator->nextPageUrl()</code></td> <td>Get the URL for the next page.</td> </tr> <tr> <td><code>$paginator->onFirstPage()</code></td> <td>Determine if the paginator is on the first page.</td> </tr> <tr> <td><code>$paginator->onLastPage()</code></td> <td>Determine if the paginator is on the last page.</td> </tr> <tr> <td><code>$paginator->perPage()</code></td> <td>The number of items to be shown per page.</td> </tr> <tr> <td><code>$paginator->previousCursor()</code></td> <td>Get the cursor instance for the previous set of items.</td> </tr> <tr> <td><code>$paginator->previousPageUrl()</code></td> <td>Get the URL for the previous page.</td> </tr> <tr> <td><code>$paginator->setCursorName()</code></td> <td>Set the query string variable used to store the cursor.</td> </tr> <tr> <td><code>$paginator->url($cursor)</code></td> <td>Get the URL for a given cursor instance.</td> </tr> </tbody> </table> </div> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYILK3E&placement=laravelcom" id="_carbonads_js"></script> </div> </section> </section> </div> </section> </div> </div> <footer class="relative pt-12 dark:bg-dark-700"> <div class="max-w-screen-2xl mx-auto w-full px-8"> <div> <a href="/" class="inline-flex"> <img class="w-16 h-16" src="/img/logomark.min.svg" alt="Laravel" width="64" height="64" loading="lazy"> </a> </div> <div class="mt-6 grid grid-cols-12 md:gap-x-8 gap-y-12 sm:mt-12"> <div class="col-span-12 lg:col-span-4"> <p class="max-w-sm text-xs text-gray-700 sm:text-sm dark:text-gray-500"> Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel attempts to take the pain out of development by easing common tasks used in most web projects.</p> <ul class="mt-6 flex items-center space-x-3"> <li> <a href="https://x.com/laravelphp"> <img class="hidden dark:inline-block w-6 h-6" src="/img/social/x.dark.min.svg" alt="X" width="24" height="20" loading="lazy"> <img class="inline-block dark:hidden w-6 h-6" src="/img/social/x.min.svg" alt="X" width="24" height="20" loading="lazy"> </a> </li> <li> <a href="https://github.com/laravel"> <img class="hidden dark:inline-block w-6 h-6" src="/img/social/github.dark.min.svg" alt="GitHub" width="24" height="24" loading="lazy"> <img class="inline-block dark:hidden w-6 h-6" src="/img/social/github.min.svg" alt="GitHub" width="24" height="24" loading="lazy"> </a> </li> <li> <a href="https://discord.gg/laravel"> <img class="hidden dark:inline-block w-6 h-6" src="/img/social/discord.dark.min.svg" alt="Discord" width="21" height="24" loading="lazy"> <img class="inline-block dark:hidden w-6 h-6" src="/img/social/discord.min.svg" alt="Discord" width="21" height="24" loading="lazy"> </a> </li> <li> <a href="https://www.youtube.com/laravelphp"> <img class="hidden dark:inline-block w-6 h-6" src="/img/social/youtube.dark.min.svg" alt="YouTube" width="169" height="150" loading="lazy"> <img class="inline-block dark:hidden w-6 h-6" src="/img/social/youtube.min.svg" alt="YouTube" width="169" height="150" loading="lazy"> </a> </li> </ul> </div> <div class="text-xs col-span-6 md:col-span-3 lg:col-span-2"> <span class="uppercase dark:text-gray-200">Highlights</span> <div class="mt-5"> <ul class="space-y-3 text-gray-700 dark:text-gray-500"> <li> <a href="/docs/11.x/releases" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Release Notes</a> </li> <li> <a href="/docs/11.x/installation" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Getting Started</a> </li> <li> <a href="/docs/11.x/routing" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Routing</a> </li> <li> <a href="/docs/11.x/blade" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Blade Templates</a> </li> <li> <a href="/docs/11.x/authentication" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Authentication</a> </li> <li> <a href="/docs/11.x/authorization" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Authorization</a> </li> <li> <a href="/docs/11.x/artisan" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Artisan Console</a> </li> <li> <a href="/docs/11.x/database" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Database</a> </li> <li> <a href="/docs/11.x/eloquent" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Eloquent ORM</a> </li> <li> <a href="/docs/11.x/testing" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Testing</a> </li> </ul> </div> </div> <div class="text-xs col-span-6 md:col-span-3 lg:col-span-2"> <span class="uppercase dark:text-gray-200">Resources</span> <div class="mt-5"> <ul class="space-y-3 text-gray-700 dark:text-gray-500"> <li> <a href="https://bootcamp.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laravel Bootcamp</a> </li> <li> <a href="https://laracasts.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laracasts</a> </li> <li> <a href="https://laravel-news.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laravel News</a> </li> <li> <a href="https://laracon.us" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laracon</a> </li> <li> <a href="https://laracon.au" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laracon AU</a> </li> <li> <a href="https://laracon.eu/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laracon EU</a> </li> <li> <a href="https://laracon.in/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laracon India</a> </li> <li> <a href="https://larabelles.com/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Larabelles</a> </li> <li> <a href="https://laravel.com/careers" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Careers</a> </li> <li> <a href="https://larajobs.com/?partner=5" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Jobs</a> </li> <li> <a href="https://laracasts.com/discuss" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Forums</a> </li> <li> <a href="/trademark" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Trademark</a> </li> </ul> </div> </div> <div class="text-xs col-span-6 md:col-span-3 lg:col-span-2"> <span class="uppercase dark:text-gray-200">Partners</span> <div class="mt-5"> <ul class="space-y-3 text-gray-700 dark:text-gray-500"> <li> <a href="https://vehikl.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Vehikl</a> </li> <li> <a href="https://webreinvent.com/?utm_source=laravel&utm_medium=laravel.com&utm_campaign=footer-link" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">WebReinvent</a> </li> <li> <a href="https://tighten.co" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Tighten</a> </li> <li> <a href="https://www.bacancytechnology.com/hire-laravel-developer?utm_source=laravel&utm_medium=partners.laravel&utm_campaign=sponsors" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Bacancy</a> </li> <li> <a href="https://64robots.com/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">64 Robots</a> </li> <li> <a href="https://activelogic.com/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Active Logic</a> </li> <li> <a href="https://www.blackairplane.com/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Black Airplane</a> </li> <li> <a href="https://www.byte5.net/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Byte 5</a> </li> <li> <a href="https://www.curotec.com/services/technologies/laravel/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Curotec</a> </li> <li> <a href="https://www.cyber-duck.co.uk/how-we-work/technology/laravel?utm_source=Laravel%20Partner&utm_medium=Sponsorship" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Cyber-Duck</a> </li> <li> <a href="https://devsquad.com/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">DevSquad</a> </li> <li> <a href="https://jump24.co.uk/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Jump24</a> </li> <li> <a href="https://kirschbaumdevelopment.com/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Kirschbaum</a> </li> </ul> </div> </div> <div class="text-xs col-span-6 md:col-span-3 lg:col-span-2"> <span class="uppercase dark:text-gray-200">Ecosystem</span> <div class="mt-5"> <ul class="space-y-3 text-gray-700 dark:text-gray-500"> <li> <a href="/docs/11.x/starter-kits#laravel-breeze" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Breeze</a> </li> <li> <a href="/docs/11.x/billing" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Cashier</a> </li> <li> <a href="/docs/11.x/dusk" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Dusk</a> </li> <li> <a href="/docs/11.x/broadcasting" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Echo</a> </li> <li> <a href="https://envoyer.io" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Envoyer</a> </li> <li> <a href="https://forge.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Forge</a> </li> <li> <a href="https://herd.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Herd</a> </li> <li> <a href="/docs/11.x/horizon" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Horizon</a> </li> <li> <a href="https://inertiajs.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Inertia</a> </li> <li> <a href="https://jetstream.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Jetstream</a> </li> <li> <a href="https://livewire.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Livewire</a> </li> <li> <a href="https://nova.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Nova</a> </li> <li> <a href="/docs/11.x/octane" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Octane</a> </li> <li> <a href="/docs/11.x/pennant" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Pennant</a> </li> <li> <a href="/docs/11.x/pint" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Pint</a> </li> <li> <a href="/docs/11.x/prompts" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Prompts</a> </li> <li> <a href="https://pulse.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Pulse</a> </li> <li> <a href="https://reverb.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Reverb</a> </li> <li> <a href="/docs/11.x/sail" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Sail</a> </li> <li> <a href="/docs/11.x/sanctum" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Sanctum</a> </li> <li> <a href="/docs/11.x/scout" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Scout</a> </li> <li> <a href="/docs/11.x/socialite" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Socialite</a> </li> <li> <a href="https://spark.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Spark</a> </li> <li> <a href="/docs/11.x/telescope" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Telescope</a> </li> <li> <a href="https://vapor.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Vapor</a> </li> </ul> </div> </div> </div> <div class="mt-10 border-t pt-6 pb-16 border-gray-200 dark:border-dark-500"> <p class="text-xs text-gray-700 dark:text-gray-400"> Laravel is a Trademark of Laravel Holdings Inc.<br /> Copyright © 2011-2024 Laravel Holdings Inc. </p> <p class="mt-6 text-xs text-gray-700 dark:text-gray-400"> Code highlighting provided by <a href="https://torchlight.dev">Torchlight</a> </p> </div> </div> </footer> <script> var algolia_app_id = 'E3MIRNPJH5'; var algolia_search_key = '1fa3a8fec06eb1858d6ca137211225c0'; var version = '11.x'; </script> <script> var _gaq=[['_setAccount','UA-23865777-1'],['_trackPageview']]; (function(d,t){ var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s) }(document,'script')); </script>  <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/45240648.js"></script> <div class="fixed"> <input type="text"> </div> </body> </html>

CINXE.COM

Database: Pagination - Laravel 11.x - The PHP Framework For Web Artisans