Laravel 8 Pagination with Live Search using AJAX

Question

I'm trying to implement pagination in laravel 8 with live search using Ajax I'm facing an issue, when i press the pagination after i search it will paginate the whole data and back to its default

This is my AdminisitrationController

//pagination
public function pagination(Request $request)
{
    $users = User::latest()->paginate(5);
    $data['role'] = Role::all();

    return view("Administration.pagination_userlist",$data, ['users'=>$users])->render();

}

//search

public function searchUser(Request $request)
{
    $data['role'] = Role::all();

    $users = User::where('name', 'like', '%'.$request->search_string.'%')
            ->orWhere('email', 'like', '%'.$request->search_string.'%')
            ->orderBy('id', 'desc')
            ->paginate(5);

          
        if($request->ajax())
        {
            if($users->count() >= 1)
            {
                return view("Administration.pagination_userlist",$data,  ['users'=>$users])- 
              >render();
            }
            else
            {
                return response()->json([
                    'status'=>'nothing_found',
                ]);
            };   
        }
         
            
            return view("Administration.userList",$data,  ['users'=>$users])->render();
}

This is my Jquery Code with ajax

 // Pagination
    $(document).on('click','.pagination a', function (event) {
        event.preventDefault();
        
        let page = $(this).attr('href').split('page=')[1];
        user(page);
    });

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    function user(page){
            $.ajax({
                url: "pagination/paginate-data?page="+page,
                success: function (response) {
                    $('.table-responsive').html(response);
                },
            });
        }

    //search

    $(document).on('keyup', function (e) {
        e.preventDefault();
        let search_string = $('#search').val();
        //console.log(search_string);

        $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
        $.ajax({
            type:"GET",
            url: "{{ route("search.user")}}",
            data: {search_string:search_string},
            success: function (response) {
                $('.table-responsive').html(response);

                if (response.status =="nothing_found")
                {
                    $('.table-responsive').html('<span class="text-danger">'+'Aucun 
                   Résultat'+'</span>');

                }
            },
        });
        
    });

This is my view:

<!--  Table -->
 <div class="card">

    <div class="card-header">
           
            

            <div class="row">
                    <div class="col-lg-6">
                    <p class="text-muted mb-0">
                        <button type="button" data-toggle="modal" data-target="#AddUserModal" 
             class="btn btn-primary">
                            <i class="fa fa-user-plus"></i>
                            Ajouter un utilisateur 
                        </button>
                    </p>
                    </div><!--end col-->

                    <div class="col-lg-6 text-right">
                        <div class="text-right">
                            <ul class="list-inline">

                                <li class="list-inline-item">
                                <form id="searchform" name="searchform">

                                    <div class="input-group">                               
                                        <input type="search" id="search" name="search" 
             class="form-control form-control-sm" placeholder="Search">
                                        <span class="input-group-append">
                                            <button type="button" class="btn btn-soft-primary 
                btn-sm"><i class="fas fa-search"></i></button>
                                        </span>
                                    </div>
                                </form>
                                </li>

                                <li class="list-inline-item">

                                    <select name="role" id="role">
                                        <option value="">Select role</option>
                                            @foreach($role as $role)
                                                <option  value="{{$role->id}}">{{$role->name}} 
                         </option>
                                            @endforeach
                                    </select>
                                </li>

                                <li class="list-inline-item">
                                    <button type="button" class="btn btn-soft-primary btn-sm 
                                   dropdown-toggle" data-toggle="dropdown" aria- 
                           haspopup="true"><i class="fas fa-filter"></i></button>
                                        <div class="dropdown-menu" style="">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another 
                                    action</a>
                                            <a class="dropdown-item" href="#">Something else 
                                 here</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Separated 
                                  link</a>
                                        </div>
                                </li>
                                
                            </ul>
                        </div>                            
                    </div><!--end col-->
                </div><!--end row-->



</div>
<div class="card-body">

 <div id="success_message"></div>

 <div class="table-responsive">
 @include("Administration\pagination_userlist",["users"=>$users])


    </div>

<span class="float-right">
    <button id="but_add" class="btn btn-success btn-sm">Add New Row</button>
</span><!--end table-->     

<!-- END Table -->

and my pagination_userlist

<table class="table mb-0" id="makeEditable">
<thead class="thead-light">
    <tr>
        <th>#</th>
        <th>Nom</th>
        <th>Email</th>
        <th>Rôle </th>
    <th name="buttons"></th></tr>
</thead>

<tbody>
    @foreach($users as $key=>$user)
    <tr>
        <td>{{$user->id}}</td>
        <td>{{$user->name}}</td>
        <td>{{$user->email}}</td>
        <td>{{$user->role->name}}</td>
        <td name="buttons"><div class=" pull-right">
        <button id="bEdit" type="button" 
            class="update_user btn btn-sm btn-soft-success btn-circle mr-2" 
            data-toggle="modal" data-target="#UpdateUserModal"
            data-id="{{$user->id}}"
            data-name="{{$user->name}}"
            data-email="{{$user->email}}"
            data-role_id="{{$user->role_id}}">
            <i class="dripicons-pencil"></i>
        </button>

        <button id="bElim" type="button" 
        class="delete_user btn btn-sm btn-soft-danger btn-circle"
        data-id="{{$user->id}}">
        <i class="dripicons-trash" aria-hidden="true"></i>
        </button></div>
        </div></td>
    </tr>
    @endforeach
</tbody>
</table>
</br>
{{  $users->links() }}



And my routes:

Route::get('pagination/paginate-data', [AdministrationController::class, 'pagination'])- 
>name('pagination');
Route::get('search-user', [AdministrationController::class, 'searchUser'])- 
 >name('search.user');

Answer 1

use

withQueryString

see in doc Larevel