Laravel Yajra DataTable自定义分页实现方法咨询

一、自定义分页样式 #

Yajra DataTable基于原生DataTables实现，修改样式主要有两种方式：

1. 直接覆盖默认CSS

原生DataTables的分页元素有固定的类名，你可以通过自定义CSS覆盖样式，比如调整按钮样式、选中状态等：

/* 基础分页按钮样式 */
.dataTables_paginate .paginate_button {
    border: 1px solid #e2e8f0;
    padding: 0.375rem 0.75rem;
    margin: 0 0.25rem;
    border-radius: 0.375rem;
    color: #4b5563;
    cursor: pointer;
}

/* 当前选中页的样式 */
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background-color: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

/* 按钮hover效果 */
.dataTables_paginate .paginate_button:hover:not(.current) {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

2. 适配第三方UI框架

如果你的项目用了Bootstrap、Tailwind等框架，可以直接指定对应风格：

// 在你的DataTable类的html()方法中配置
return $this->builder()
            ->setTableId('demo-table')
            ->columns($this->getColumns())
            ->minifiedAjax()
            ->parameters([
                // 指定Bootstrap风格分页
                'pagingType' => 'bootstrap_full_numbers',
                // 自定义分页文本
                'language' => [
                    'paginate' => [
                        'first' => '首页',
                        'last' => '末页',
                        'previous' => '上一页',
                        'next' => '下一页'
                    ]
                ]
            ]);

二、自定义分页逻辑 #

如果需要修改分页的核心逻辑（比如自定义每页条数规则、特殊数据筛选分页等），可以通过重写DataTable的分页处理流程实现：

1. 手动控制分页查询

在DataTable类的query()方法中，跳过默认分页逻辑，手动处理分页参数：

use Illuminate\Pagination\LengthAwarePaginator;

public function query(User $model)
{
    $baseQuery = $model->where('status', 1); // 基础查询条件

    // 获取DataTables传入的分页参数
    $page = request()->get('page', 1);
    $perPage = request()->get('length', 10);
    $offset = ($page - 1) * $perPage;

    // 自定义分页逻辑：比如只返回ID为偶数的数据（示例）
    $paginatedData = $baseQuery->whereRaw('id % 2 = 0')
                               ->skip($offset)
                               ->take($perPage)
                               ->get();
    $totalCount = $baseQuery->whereRaw('id % 2 = 0')->count();

    // 返回自定义分页实例
    return $this->applyScopes(new LengthAwarePaginator(
        $paginatedData,
        $totalCount,
        $perPage,
        $page,
        ['path' => request()->url(), 'query' => request()->query()]
    ));
}

2. 自定义分页器类

如果需要全局复用自定义逻辑，可以创建一个继承自LengthAwarePaginator的自定义分页器，然后在DataTable中使用：

// 自定义分页器类
class CustomPaginator extends LengthAwarePaginator
{
    // 重写需要自定义的方法，比如计算页码、数据切片逻辑等
    public function getCollection()
    {
        // 对分页数据做额外处理
        return parent::getCollection()->map(function ($item) {
            $item->custom_field = '自定义内容';
            return $item;
        });
    }
}

// 在DataTable类中使用
public function query(User $model)
{
    $query = $model->newQuery();
    $page = request()->get('page', 1);
    $perPage = request()->get('length', 10);
    
    $results = $query->skip(($page-1)*$perPage)->take($perPage)->get();
    $total = $query->count();
    
    return $this->applyScopes(new CustomPaginator(
        $results, $total, $perPage, $page,
        ['path' => request()->url(), 'query' => request()->query()]
    ));
}

内容的提问来源于stack exchange，提问作者HumzaXSN