登录
当前位置： 首页 > 知识库问答 >
问题：

Laravel Livewire分页

益银龙
2023-03-14

Laravel-8.6.0（Jetstream）,Livewire-2.2.7

除了其他东西，我有两个简单的表，搜索输入是用LiveWire呈现的。两个Livewire组件的逻辑基本相同，主要区别是DB查询格式。在一个表（搜索、分页）中，所有的工作都很完美，但在第二个表中，分页有问题。

怎么了？当我点击分页链接（例如，从第一页gotoPage(2))，请求被发送，浏览器中的url更改为适当的查询字符串，响应被接收，但响应中没有HTML部分，DOM没有变化，分页显示第一页是活动的。如果我手动刷新页面，表会显示第2页的数据，之后我甚至可以为下一页或上一页获取新数据，但在初始页面刷新后只能获取一次。如果我再次点击分页链接，没有HTML数据响应，没有DOM更改...

我试过什么了？

    null 
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;

class Extension extends Model
{
    use HasFactory;
    protected $guarded = [];

    public function user()
    {
        return $this->belongsTo('App\Models\User', 'directory', 'ext');
    }

    public static function search($query)
    {
        return empty($query) ? static::query()
            : static::where('directory', 'like', '%' . $query . '%')
            ->orWhere('mobile', 'like', '%' . $query . '%')
            ->orWhere('department', 'ilike', '%' . $query . '%')
            ->orWhere('name1', 'ilike', '%' . $query . '%')
            ->orWhere('name2', 'ilike', '%' . $query . '%');
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;

class PhonebookTable extends Component
{
    use WithPagination;

    public $perPage = 10;
    public $search = '';

    public function render()
    {
       return view('phonebook.phonebook-table', [
          'phonebook' => \App\Models\Extension::search($this->search)
              ->with('user')
              ->orderBy('directory', 'asc')
              ->paginate(10)
            ]);            
        }
    }

    /**
     *  Livewire Lifecycle Hook
     */
    public function updatingSearch(): void
    {
        $this->resetPage();
    }
}

<div>
    <div class="flex items-center justify-between">
        {{-- Search Input --}}
        <div class="relative text-gray-700 focus-within:text-gray-600 m-2">
            <span class="absolute inset-y-0 left-0 flex items-center pl-2">
                <button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
                        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </span>
            <input wire:model="search" type="search" name="q"
                class="py-2 text-sm text-gray 
                bg-gray-100 rounded-md pl-10 focus:outline-none 
                focus:bg-gray-200 focus:text-gray-700"
                placeholder="{{ __('Search...') }}" 
                autocomplete="off">
        </div>
        {{-- End Of Search Input --}}

        {{-- PerPage Select Dropdown --}}
        <div>
            <span>{{ __('Per page:') }}</span>
            <div class="inline-block relative mr-2">
                <select wire:model="perPage" class="block appearance-none w-full
                    bg-white border border-gray-400 hover:border-gray-500 px-4 py-2
                    pr-8 rounded shadow leading-tight focus:outline-none 
                    focus:shadow-outline">
                    <option>10</option>
                    <option>25</option>
                    <option>50</option>
                </select>
                <div class="pointer-events-none absolute 
                    inset-y-0 right-0 flex items-center px-2 text-gray-700">
                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" 
                        viewBox="0 0 20 20">
                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757
                            6.586 4.343 8z" />
                    </svg>
                </div>
            </div>
        </div>
        {{-- End Of PerPage Select Dropdown --}}
    </div>

    {{-- Phonebook Table --}}
    <div class="container p-2">
        <table class="text-center w-full">
            <thead class="bg-gray-400 flex text-white w-full item-center rounded-md">
                <tr class="flex w-full py-2">
                    <th class="px-4 w-1/4">{{ __('Name1') }}</th>
                    <th class="px-4 w-1/4">{{ __('Name2') }}</th>
                    <th class="px-4 w-1/4">{{ __('Department') }}</th>
                    <th class="px-4 w-1/4">{{ __('Extension') }}</th>
                    <th class="px-4 w-1/4">{{ __('Mobile') }}</th>
                </tr>
            </thead>
            <tbody class="">
                @foreach ($phonebook as $directory)
                <tr class="flex w-full py-2 hover:bg-gray-100">
                    <td class="px-4 w-1/4">{{ $directory->name1??$directory->name }}
                    </td>
                    <td class="px-4 w-1/4">{{ $directory->name2 }}</td>
                    <td class="px-4 w-1/4">{{ $directory->user->department??'' }}</td>
                    <td class="px-4 w-1/4">{{ $directory->directory }}</td>
                    <td class="px-4 w-1/4">{{ $directory->user->mobile??'' }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    {{-- End Of Phonebook Table --}}

    {{-- Pagination and Records Count info --}}
    <div class="p-2 bg-gray-200">
        {{ $phonebook->links('vendor.pagination.livewire-tailwind') }}
    </div>
    {{-- End Of Pagination and Records Count info --}}
</div>

非工作Livewire组件和刀片视图的代码：

<?php

namespace App\Models;

use Illuminate\Support\Facades\Auth;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Livewire\WithPagination;

class Phonecall extends Model
{
    use HasFactory;
    use WithPagination;

    protected $table = "md_phonecall";

    // custom method for "live" searching from livewire component
    public static function search($query)
    {
        return empty($query) ? static::query() : static::where('dialednumber', 'like', '%' . $query . '%')
            ->orWhere('startdate', 'like', $query)
            ->orWhere('starttime', 'like', $query)
            ->orWhere('chargednumber', 'like', '%' . $query . '%')
            ->orWhere('conditioncode', 'ilike', '%' . $query . '%');
    }

    // 'conditioncode' accessor for casting integer value from DB to String shown in table View
    public function getConditioncodeAttribute($value)
    {
        switch ($value) {
            case 7;
                return 'Incoming call (' . $value . ')';
            case 8;
                return 'Internal call (' . $value . ')';
            case 10;
                return 'Outgoing call (' . $value . ')';
            case 15;
                return 'Transfer call (' . $value . ')';
            case 19;
                return 'Outgoing call (' . $value . ')';
            case 23;
                return 'Missed call (' . $value . ')';
            case 25;
                return 'Internal call (' . $value . ')';
            case 28;
                return 'Outgoing call (' . $value . ')';
            case 29;
                return 'Outgoing call (' . $value . ')';
            default;
                return 'Unknown type (' . $value . ')';
        }
    }

    // Local Scope for filtering only calls belonging to logged User
    public function scopeMycalls($query)
    {
        return $query->where('chargednumber', '=', Auth::user()->ext)->orWhere('dialednumber', '=', Auth::user()->ext);
    }

    /**
     * Scope a query to only include phonecalls of a given type.
     *
     * @param  \Illuminate\Database\Eloquent\Builder  $query
     * @param  mixed  $type
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function scopeOfType($query, $type)
    {
        if ($type === 'all') return $query->where('conditioncode', 'like', '%');
        if ($type === 'incoming') return $query->where('conditioncode', '=', 7);
        if ($type === 'outgoing') return $query->where('conditioncode', '=', 10)->orWhere('conditioncode', '=', 19)->orWhere('conditioncode', '=', 28);
        if ($type === 'missed') return $query->where('conditioncode', '=', 23);
        if ($type === 'internal') return $query->where('conditioncode', '=', 8)->orWhere('conditioncode', '=', 15)->orWhere('conditioncode', '=', 25);
    }

    public function scopePeriod($query, $from, $to)
    {
        return $query->whereBetween('startdate', [$from, $to]);
    }

    public function scopeOfExtension($query, $extension)
    {
        return $query->where('dialednumber', 'like', '%' . $extension . '%')
            ->orWhere('chargednumber', 'like', '%' . $extension . "%");
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;

class MyPhonecallsTable extends Component
{
    use WithPagination;

    public $perPage = 10;
    public $search = '';

    public $calltype = 'all';

    public function render()
    {
        return view('mycalls.my-phonecalls-table', [
            'mycalls' => \App\Models\Phonecall::search(
                $this->search
            )->mycalls()
                ->ofType($this->calltype)
                ->orderBy('startdate', 'desc')->orderBy('starttime', 'desc')->paginate($this->perPage),
        ]);
    }

    /**
     *  Livewire Lifecycle Hook
     */
    public function updatingSearchInput(): void
    {
        $this->resetPage();
    }
}


<div>
    <div class="flex items-center justify-between">
        {{-- Search Input --}}
        <div class="relative text-gray-700 focus-within:text-gray-600 m-2">
            <span class="absolute inset-y-0 left-0 flex items-center pl-2">
                <button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
                        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </span>
            <input wire:model="search" type="search" name="q"
                class="py-2 text-sm text-gray bg-gray-100 rounded-md pl-10 focus:outline-none focus:bg-gray-200 focus:text-gray-700"
                placeholder="{{ __('Search...') }}" autocomplete="off">
        </div>
        {{-- End Of Search Input --}}

        {{-- Call type selector --}}
        @include('partials.calltypes')
        {{-- End of Call type selector --}}

        {{-- Paginator Select Dropdown --}}
        <div>
            <span>{{ __('Per page:') }}</span>
            <div class="inline-block relative mr-2">
                <select wire:model="perPage"
                    class="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
                    <option>10</option>
                    <option>25</option>
                    <option>50</option>
                </select>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
                </div>
            </div>
        </div>
        {{-- End Of Paginator Select Dropdown --}}
    </div>

    {{-- Phonecalls Table --}}
    <div class="container p-2" id="my-calls">
        <table class="text-center w-full" id="my-calls-table">
            <thead class="bg-gray-400 flex text-white w-full item-center rounded-md">
                <tr class="flex w-full py-2">
                    <th class="px-4 w-1/5">{{ __('Date') }}</th>
                    <th class="px-4 w-1/5">{{ __('Time') }}</th>
                    <th class="px-4 w-1/5">{{ __('Duration') }}</th>
                    <th class="px-4 w-1/5">{{ __('Calling No') }}</th>
                    <th class="px-4 w-1/5">{{ __('Called No') }}</th>
                    {{-- <th class="px-4 w-1/6">{{ __('Call Type') }}</th> --}}
                </tr>
            </thead>
            <!-- Remove the nasty inline CSS fixed height on production and replace it with a CSS class — this is just for demonstration purposes! -->
            <tbody class="">
                @foreach ($mycalls as $mycall)
                <tr class="flex w-full py-2 hover:bg-gray-100">
                    <td class="px-4 w-1/5">
                        {{ \Carbon\Carbon::createFromFormat('Y-m-d',$mycall->startdate)->format('d.m.Y.')}}
                    </td>
                    <td class="px-4 w-1/5">
                        {{ \Carbon\Carbon::createFromFormat('H:i:s', $mycall->starttime, 'UTC')->tz('Europe/Belgrade')->toTImeString() }}
                    </td>
                    <td class="px-4 w-1/5">
                        {{ gmdate('H:i:s', $mycall->duration) }}</td>
                    <td class="px-4 w-1/5">{{ $mycall->chargednumber}}</td>
                    <td class="px-4 w-1/5">{{ $mycall->dialednumber}}</td>
                    {{-- <td class="px-4 w-1/6">{{ $phonecall->conditioncode}}</td> --}}
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    {{-- End Of Phonecalls Table --}}

    {{-- Pagination and Records Count info --}}
    <div class="p-2 bg-gray-200">
        {{ $mycalls->links('vendor.pagination.livewire-tailwind') }}
    </div>
    {{-- End Of Pagination and Records Count info --}}
</div>

在我等待任何建议的同时，我将尝试一个更干净的Laravel/JetStream/LiveWire安装。提前感谢，任何帮助都不胜感激！

共有1个答案

羊浩广
2023-03-14

通过再看一遍我的代码，我注意到了模型类中的一些“剩余物”。在model类中不应该有“use withpagination；”活线特性！当我删除“使用”状态网和清除视图缓存时，一切正常！

 类似资料：
  • LaravelLivewire 2：我们是要制作一个新的类，还是像传统的控制器一样

    所以，这是我的第一个学习项目。 说到这里，我正在使用

  • 分段的分页

    主要内容：逻辑地址到物理地址的转换纯粹的分段并不是很流行，并没有被许多操作系统所使用。 但是，分段可以与分页结合使用，以从两种技术中获得最佳功能。 在分段的分页中，主存储器被分成可变大小的段，它们被进一步分成固定大小的页面。 页面比分段小。 每个段都有一个页表，这意味着每个程序都有多个页表。 逻辑地址表示为分段号(基地址)，页码和页面偏移量。 分段号 → 它指向相应的分段号。 页码 → 它指向分段中的确切页面。 页面偏移 → 用作

  • 7 分页和分段

    分页: 用户程序的地址空间被划分成若干固定大小的区域，称为“页”，相应地，内存空间分成若干个物理块，页和块的大小相等。可将用户程序的任一页放在内存的任一块中，实现了离散分配。 分段: 将用户程序地址空间分成若干个大小不等的段，每段可以定义一组相对完整的逻辑信息。存储分配时，以段为单位，段与段在内存中可以不相邻接，也实现了离散分配。 分页与分段的主要区别 页是信息的物理单位,分页是为了实现非连续分配

  • 分页与分段比较

    分页与分段比较，如下表所示 - 编号 分页 分段 1 非连续的内存分配 非连续的内存分配 2 分页将程序分成固定大小的分页。 分段将程序分成可变大小的段。 3 由操作系统负责 由编译器负责。 4 分页比分段更快 分段比分页慢 5 分页更接近操作系统 分段更接近用户 6 它会遭受内部碎片问题 它会遭受外部碎片问题 7 没有外部碎片 没有外部碎片 8 逻辑地址分为:页码和页码偏移 逻辑地址分为:分段号

  • thinkphp3.2.3 分页代码分享

    本文向大家介绍thinkphp3.2.3 分页代码分享，包括了thinkphp3.2.3 分页代码分享的使用技巧和注意事项，需要的朋友参考一下 对于thinkphp分页的实现效果，两种调用方法，一种调用公共函数中的函数方法(参考http://www.cnblogs.com/tianguook/p/4326613.html)，一种是在模型中书写分页的方法   1、在公共函数Application/C

  • 分页

    Django提供了一些类来帮助你管理分页的数据 -- 也就是说，数据被分在不同页面中，并带有“上一页/下一页”标签。这些类位于django/core/paginator.py中。 示例 向Paginator提供对象的列表，以及你想为每一页分配的元素数量，它就会为你提供访问每一页上对象的方法： >>> from django.core.paginator import Paginator >>> o

  • 分页

    当一次要在一个页面上显示很多数据时，通常需要将其分成几部分， 每个部分都包含一些数据列表并且一次只显示一部分。这些部分在网页上被称为分页。 Yii 使用 yii\data\Pagination 对象来代表分页方案的有关信息。特别地， total count 指定数据条目的总数。 注意，这个数字通常远远大于需要在一个页面上展示的数据条目。 page size 指定每页包含多少数据条目。 默认值为 2

  • 分页

    简介 在 Linux 内核启动过程中的第五部分，我们学到了内核在启动的最早阶段都做了哪些工作。接下来，在我们明白内核如何运行第一个 init 进程之前，内核初始化其他部分，比如加载 initrd ，初始化 lockdep ，以及许多许多其他的工作。 是的，那将有很多不同的事，但是还有更多更多更多关于内存的工作。 在我看来，一般而言，内存管理是 Linux 内核和系统编程最复杂的部分之一。这就是为什

相关问答

Springboot cassandra分页Spring靴分页ElasticSearch-聚合/分组依据：排序和分页html分区与分区

相关文章

ThinkPHP 3.2 数据分页代码分享不区分ROW_NUMBER（）的SQL Server DISTINCT分页ajax实现分页和分页查询分页和细分之间的区别PHP函数实现分页含文本分页和数字分页

相关阅读

MyBatis分页按需分页分页技术分库分表：ShardingSphere主成分分析 PCA

相关工具

word分词盘古分词genius中文分词H.264 分析器iOS 评分控件

相关文档

分布式 JavaStack Overflow 关于 Python 的部分高分问题Tendermint 源码分析Java 经验分享Memcached 源码分析
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.