使用 AJAX 的Laravel 8实时搜索分页

j5fpnvbx  于 2023-01-31  发布在  其他
关注(0)|答案(1)|浏览(130)

我尝试在laravel 8中使用Ajax实现实时搜索分页,但遇到了一个问题,当我在搜索后按下分页时,它会对整个数据分页并返回到默认值
这是我的管理控制器

//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();
}

这是我的jquery代码与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>');

                }
            },
        });
        
    });

这是我的看法:
一个二个一个一个
和我的分页用户列表

<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');
6yt4nkrj

6yt4nkrj1#

使用
带有查询字符串
参见文件Larevel

相关问题