sebastiansulinski/php-paginator

无框架限制的PHP分页组件

v3.2.0 2024-03-19 15:47 UTC

README

轻量级、易于使用的PHP 8应用程序分页组件。

安装

composer require sebastiansulinski/php-paginator

结构

该组件由2个主要类组成

  • Pagination - 类,您需要传入

    • 一个 SSD\Paginator\Request 的实例,或者,如果您已经在项目中使用了 \Illuminate\Http\Request,您可以传入它的实例。
    • 记录总数
    • 每页记录数
    • 表示当前页查询字符串参数的字符串键
  • Paginator - 一个用于返回分页HTML结构的实现类的父类。它的构造函数接受2个参数

    • Pagination 的实例
    • 给定页面的记录,作为 SSD\Paginator\CollectionIlluminate\Support\Collection 的实例

此软件包包含一个 Paginator 的实现

VueSelectPaginator

当在其实例上调用 render() 方法时,VueSelectPaginator 返回以下结构(所有实体均已解码以供清晰理解)

<ssd-paginator 
    :options="{
        "1":"http://paginator.app",
        "2":"http://paginator.app/?page=2",
        "3":"http://paginator.app/?page=3",
        "4":"http://paginator.app/?page=4",
        "5":"http://paginator.app/?page=5"
    }" 
    current="http://paginator.app/?page=2" 
    previous="http://paginator.app" 
    next="http://paginator.app/?page=3" 
    first="http://paginator.app" 
    last="http://paginator.app/?page=5" 
    :number-of-pages="5"
></ssd-paginator>

为了支持此实现,此软件包附带一个 VueJs 组件 - 您可以在 resources/src/js/components/SsdPaginator 下找到它

import { createApp } from 'vue'
import SsdPaginator from './components/SsdPaginator'

createApp({
  components: { SsdPaginator },
}).mount('#app')

要创建自己的 Paginator 实现,您只需提供 html() 方法的实现即可,该方法应返回您的分页布局的HTML结构。

样式

SsdPaginator 使用 tailwindcss v3 进行预先格式化,但您可以使用可用的插槽替换其结构,并根据需要应用自己的样式。

用法

// import all dependencies

use SSD\Paginator\Request;
use SSD\Paginator\Collection;
use SSD\Paginator\Pagination;
use SSD\Paginator\VueSelectPaginator;

// instantiate Pagination class

$pagination = new Pagination(
    Request::capture(),
    160,
    10,
    'page'
);

// get your records as array and pass through to the Collection
// in this example I just use array of numbers and get only a chunk
// of records based on offset and limit, but you'd probably use
// some active model to get only the records you're after

$records = range(1, 160);
$records = new Collection($records);

$chunk = $records->splice(
    $pagination->offset(),
    $pagination->limit()
);

// instantiate SelectPaginator with instance of Pagination and collection of records

$paginator = new VueSelectPaginator($pagination, $chunk);

显示记录和分页

// loop through records using Collection::map() and implode() methods

echo $paginator->records()->map(function($record) {
    // ... 
})->implode('');

// or using standard foreach loop

foreach($paginator->records() as $record) {
    // ...
}

// display pagination

echo $paginator->render();

自定义分页结构

如果您不想使用 Paginator 类的实现,则 Pagination 类具有所有必要的方法,允许您直接在视图中组合分页结构,例如,要显示所有页面的可点击数字并使用 class="active" 突出显示当前页面,您可以这样做:

$pagination = new Pagination(
    Request::capture(),
    160,
    10,
    'page'
);

echo '<ul>';

echo $pagination->urlList()->map(function(string $url, int $page) use($pagination) {
    $link  = '<li><a href="'.$url.'"';
    $link .= $pagination->current() === $page ? ' class="active"' : null;
    $link .= '>'.$page.'</a></li>';
    return $link;
})->implode('');

echo '</ul>';