• This repository has been archived on 21/Oct/2022
  • Stars
    star
    113
  • Rank 309,148 (Top 7 %)
  • Language
    PHP
  • Created over 9 years ago
  • Updated about 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🎁 Laravel 5 Custom Pagination Presenter

Landish/Pagination

Note: Works with only 5.0, 5.1 and 5.2 versions. 5.3 and above it does not work. PR's welcome!

Build Status Latest Stable Version Total Downloads Latest Unstable Version License

Laravel 5 comes with Pagination class, which is perfectly rendered to match Bootstrap 3 styles.

This package gives you ability to change the display output of rendered pagination elements for Front-end Frameworks, such as: Semantic UI, Zurb Foundation, UIKit and Materialize.

With this package it is also very easy to create custom pagination HTML output.

Table of Contents

Installation

To install landish/pagination package, you have to run the following command in your Terminal, or Comand Promt:

$ composer require landish/pagination

Or manually add the following lines in to your composer.json file:

"require": {
    "landish/pagination": "~1.0"
}

and run the composer update or composer install command.

Usage

Add following lines of code in your *.blade.php file, where you want to dispay the pagination.

For Semantic UI:

{!! (new Landish\Pagination\SemanticUI($items))->render() !!}
// or add "\Simple" in namespace for "Simple Pagination"
{!! (new Landish\Pagination\Simple\SemanticUI($items))->render() !!}

For Zurb Foundation:

{!! (new Landish\Pagination\ZurbFoundation($items))->render() !!}
// or add "\Simple" in namespace for "Simple Pagination"
{!! (new Landish\Pagination\Simple\ZurbFoundation($items))->render() !!}

For UIKit:

{!! (new Landish\Pagination\UIKit($items))->render() !!}
// or add "\Simple" in namespace for "Simple Pagination"
{!! (new Landish\Pagination\Simple\UIKit($items))->render() !!}

For Materialize (Contributed by @arandilopez):

{!! (new Landish\Pagination\Materialize($items))->render() !!}
// or add "\Simple" in namespace for "Simple Pagination"
{!! (new Landish\Pagination\Simple\Materialize($items))->render() !!}

Usage - Recommended Way

If you display pagination on several pages of your web application and have to write to the output code in several files, then this is, what I would recommend to do:

Just create Pagination.php file in your /app/ directory and paste the following code:

Note: This example is suitable for you, if you haven't change the Laravel Application Namespace, otherwise just use your custom namespace instead of App.

<?php namespace App;

use Landish\Pagination\SemanticUI;

// Uncomment bellow line, if you like to use "Simple Pagination"
// use Landish\Pagination\Simple\SemanticUI;

class Pagination extends SemanticUI {

}

In that case, you only have to add the following code in your blade template files:

{!! (new App\Pagination($items))->render() !!}

And in future, if you decide to override the output of pagination elements, it will be much more easier to change in app/Pagination.php file, rather then in several blade template files.

Simple Pagination

Laravel gives you ability to create "Simple Pagination", which will have only Previous and Next buttons, something like Bootstrap has.

The landish/pagination package supports this kind of pagination for Semantic UI, Zurb Foundation and UIKit.

In order to use, first call the simplePaginate() method on Eloquent Model.

$items = User::where('votes', '>', 100)->simplePaginate(15);

And after that, add the \Simple suffix in namespace, when displaying the pagination output. Something like this:

{!! (new Landish\Pagination\Simple\ZurbFoundation($items))->render() !!}

Additional Wrappers

If you need to add additional wrappers to your pagination output, which will be displayed only if items have pages, then you can do it like this:

@if($items->hasPages())
	<div class="pagination-wrapper">
    	<div class="pagination-wrapper-inner">
        	{!! (new App\Pagination($items))->render() !!}
        </div>
	</div>
@endif

Of course, you are free to change the .pagination-wrapper and .pagination-wrapper-inner CSS classes and the HTML.

Appending To Pagination Links

Appending to pagination links gives you ability to add extra query strings to your pagination links.

With this package you can do it with following lines of code:

{!! $items->appends(['key' => 'value'])->render(new App\Pagination($items))  !!}

Create Custom Pagination

Creating custom pagination or extending landish/pagination package is very easy.

Landish\Pagination\PaginationHTML class contains the following properties:

<?php namespace Landish\Pagination;

class PaginationHTML {

    /**
     * Pagination wrapper HTML.
     *
     * @var string
     */
    protected $paginationWrapper = '<ul class="pagination">%s %s %s</ul>';

    /**
     * Available page wrapper HTML.
     *
     * @var string
     */
    protected $availablePageWrapper = '<li><a href="%s">%s</a></li>';

    /**
     * Get active page wrapper HTML.
     *
     * @var string
     */
    protected $activePageWrapper = '<li class="active"><span>%s</span></li>';

    /**
     * Get disabled page wrapper HTML.
     *
     * @var string
     */
    protected $disabledPageWrapper = '<li class="disabled"><span>%s</span></li>';

    /**
     * Previous button text.
     *
     * @var string
     */
    protected $previousButtonText = '&laquo;';

    /**
     * Next button text.
     *
     * @var string
     */
    protected $nextButtonText = '&raquo;';

    /***
     * "Dots" text.
     *
     * @var string
     */
    protected $dotsText = '...';
    
    ...
    
    }

Simply extend the Landish\Pagination\Pagination class in your app/Pagination.php file, just like I recommended above and overwrite these properties:

<?php namespace App;

use Landish\Pagination\Pagination as BasePagination;

class Pagination extends BasePagination {
	
	/**
     * Pagination wrapper HTML.
     *
     * @var string
     */
	protected $paginationWrapper = '<ol class="pagination-extended-css-class">%s %s %s</ol>';
	
	...
}

After that, just simply place the following code in your blade template file.

{!! (new App\Pagination($items))->render() !!}

License

The Landish/Pagination package is open-sourced software licensed under the MIT license

More Repositories

1

pingcrm-react

⚛️ Ping CRM React - A demo app to illustrate how Inertia.js works with Laravel and React.
PHP
531
star
2

react-tailwindcss-demo

⚛️ React and Tailwind CSS Demo
CSS
58
star
3

cz-gitmoji

🔬😜 Commitizen adapter for gitmoji.
JavaScript
31
star
4

create-tailwind-plugin

📟 Create Tailwind CSS plugin and publish on npm with ease
TypeScript
24
star
5

CodeIgniter-2-Scaffolding

🛠 Simple Scaffolding Controller for CodeIgniter 2.X. Version
PHP
11
star
6

Laravel-KA

Deprecated. Use Laravel Lang Instead. https://github.com/Laravel-Lang/lang
PHP
10
star
7

country-flags

🇬🇪🇪🇸🇺🇸 Country Flags (16x11) Sprite
CSS
7
star
8

css-cursors

⚛️ Showcase of CSS cursors built with React and Tailwind CSS
CSS
7
star
9

blueprint-components

📦 💁 The missing components for Blueprint (React)
JavaScript
6
star
10

tailwindcss-plugin-demo

Generated with create-tailwind-plugin
JavaScript
5
star
11

pdfmake-unicode

🖨 Support Unicode Characters in PDFMake library.
JavaScript
4
star
12

sport-icons

⚽️🎾🏀 Sport Icons Sprite
CSS
3
star
13

tailwindcss-plugin-boilerplate

(WIP) TailwindCSS Plugin Boilerplate
JavaScript
3
star
14

landish.github.com

👨‍💻 Source code of page landish.github.com
HTML
3
star
15

yaml-translate

🇬🇪 Translate YAML files into JSON
JavaScript
3
star
16

Alfred.Workaholic

👨‍💻 Simple Alfred Extension to open and close necessary Applications for working on Web Projects on OSX.
2
star
17

Compass-Sprites

🏁 Compass Better Sprites
CSS
1
star
18

RedactorJS-GE

🇬🇪 Redactor WYSIWYG HTML Editor Georgian Language Pack
JavaScript
1
star
19

underscore-mixins

⚒ Collection of helpful mixins for underscore.js
JavaScript
1
star
20

translit-geo

🇬🇪 Translit Latin characters to Georgian
JavaScript
1
star
21

Alfred.GoogleChromeDevMode

🚨 Alfred Extension to open Google Chrome with Disabled Web Security
1
star
22

module-boilerplate

📦 NPM Module Boilerplate
JavaScript
1
star