Live search and pagination not filtering results-CodePudding

I am using a live search and a pagination, however, when I am doing the search, the render pagination still show other data not related to the search word I entered.

here is my input

<input type="text"  id="search" placeholder="Search Patient" wire:model="search" />

here is my render

public function render()
{
    
    $search = $this->search;
    $get_Country = DB::table('countries');
    $get_Country = $get_Country->select(
                'country'
    );
    $gender = DB::table('u_hispatients')->select('U_GENDER')->groupBy('U_GENDER')->get();
    $nationalities = DB::table('nationalities')->select('Nationality')->get();
    $get_Country=$get_Country->groupBy('country')->get();


    return view('livewire.u-hispatients',[ 'patients'=>u_hispatient::Where('U_FIRSTNAME', 'like', '%'.$search.'%')
                                ->orWhere('U_LASTNAME','like','%'.$search.'%')
                                ->orWhere('U_MIDDLENAME', 'like','%'.$search.'%')
                                ->orderBy($this->sortColumnName, $this->sortDirection)
                                ->paginate($this->perPage),
                'get_Country'=>$get_Country,
                'gender'=>$gender,
                'nationalities'=>$nationalities]);

}

here is the blade file

<div >
    <input type="text"  id="search" placeholder="Search Patient" wire:model="search" />
    <button  data-bs-toggle="modal" data-bs-target="#studentModal"> Add Patient</button> 
</div>

<div >
    <label for="itemPerPage">Patients per Page:</label>
    <select name="itemPerPage" id=""wire:model="perPage" >
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>

</div>
{{-- {{($search)}} --}}
<table  id="patients">
    <thead>
            <th scope="col" >
                <span  wire:click="sortBy('CODE')"> Patient ID
                    <i ></i>
                    <i ></i>
                   
                </span>
            </th>
            <th >
                <span  wire:click="sortBy('U_LASTNAME')"> Last Name
                    <i ></i>
                    <i ></i>
                </span>
            </th>
            <th >
                <span  wire:click="sortBy('U_FIRSTNAME')"> First Name
                <i ></i>
                <i ></i>
            </span>
            </th>
            <th  >
                <span  wire:click="sortBy('U_MIDDLENAME')"> Middle Name
                <i ></i>
                <i ></i>
            </span>
            </th>
            <th>Ext.</th>
            <th>Birth Date</th>
            <th>
                <span  wire:click="sortBy('U_GENDER')"> Sex
                <i ></i>
                <i ></i>
            </span>
        </th>
            <th>No. of Visit</th>
            <th>Status</th>

    </thead>
    <tbody>
            @foreach($patients as $item)
        <tr id="patientUpdate" data-bs-toggle="modal" data-bs-target="#viewPatientModal"  wire:click="edit('{{ $item->CODE }}')">
                        <td >{{ $item->CODE }}</td>
                        <td>{{ $item->U_LASTNAME }}</td>
                        <td>{{ $item->U_FIRSTNAME }}</td>
                        <td>{{ $item->U_MIDDLENAME }}</td>
                        <td>{{ $item->U_EXTNAME }}</td>
                        <td>{{ $item->U_BIRTHDATE }}</td>
                        <td>{{ $item->U_GENDER }}</td>
                        <td>{{ $item->U_VISITCOUNT }}</td>         
                        <td>
                            @if($item->U_ACTIVE==1)
                                {{ ('Yes') }}
                            
                            @else
                                {{('No')}}
                            
                            @endif
                            </td>         
                </tr>
                {{-- @empty --}}
            @endforeach</td>
    </tbody>
</table>
<div >
    {{ $patients->links('pagination::bootstrap-5-custom') }}
</div>

CodePudding user response：

Livewire has some rules which you need to follow. They are in the documentation, and what you're seeing here is a result of those conventions not being followed.

The exact thing you are seeing here, is a so-called "DOM-diffing issue". There are three elements here that I have changed,

The entire view must be encapsulated in one big <div>. There can only be ONE root element in that view.
The <tr> element in the @foreach loop has a id attribute which is not dynamic, meaning that it will create multiple IDs on the same page, which is bad (IDs must always be unique).
The <tr> element in your loop is generated dynamically, and therefor Livewire wants you to put wire:key on that, to something unique.

Note that I assume that your $item variable has an id, which is the unique identifier of that row in the database. If the primary key-field in the database is called something else, then change the wire:key="patient-{{ $item->id }}" to whichever is the unique of that row.

<div>
    <div >
        <input type="text"  id="search" placeholder="Search Patient" wire:model="search" />
        <button  data-bs-toggle="modal" data-bs-target="#studentModal"> Add Patient</button> 
    </div>

    <div >
        <label for="itemPerPage">Patients per Page:</label>
        <select name="itemPerPage" id=""wire:model="perPage" >
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
        </select>

    </div>
    {{-- {{($search)}} --}}
    <table  id="patients">
        <thead>
            <th scope="col" >
                <span  wire:click="sortBy('CODE')"> Patient ID
                    <i ></i>
                    <i ></i>
                </span>
            </th>
            <th >
                <span  wire:click="sortBy('U_LASTNAME')"> Last Name
                    <i ></i>
                    <i ></i>
                </span>
            </th>
            <th >
                <span  wire:click="sortBy('U_FIRSTNAME')"> First Name
                    <i ></i>
                    <i ></i>
                </span>
            </th>
            <th  >
                <span  wire:click="sortBy('U_MIDDLENAME')"> Middle Name
                    <i ></i>
                    <i ></i>
                </span>
            </th>
            <th>Ext.</th>
            <th>Birth Date</th>
            <th>
                    <span  wire:click="sortBy('U_GENDER')"> Sex
                    <i ></i>
                    <i ></i>
                </span>
            </th>
            <th>No. of Visit</th>
            <th>Status</th>
        </thead>
        <tbody>
            @foreach($patients as $item)
                <tr wire:key="patient-{{ $item->id }}" data-bs-toggle="modal" data-bs-target="#viewPatientModal"  wire:click="edit('{{ $item->CODE }}')">
                    <td>{{ $item->CODE }}</td>
                    <td>{{ $item->U_LASTNAME }}</td>
                    <td>{{ $item->U_FIRSTNAME }}</td>
                    <td>{{ $item->U_MIDDLENAME }}</td>
                    <td>{{ $item->U_EXTNAME }}</td>
                    <td>{{ $item->U_BIRTHDATE }}</td>
                    <td>{{ $item->U_GENDER }}</td>
                    <td>{{ $item->U_VISITCOUNT }}</td>         
                    <td>
                        {{ $item->U_ACTIVE == 1 ? 'Yes' : 'No' }}
                    </td>
                @endforeach
            </tr>
        </tbody>
    </table>
    <div >
        {{ $patients->links('pagination::bootstrap-5-custom') }}
    </div>
</div>