使用 laravel 和 jquery 分页无法按预期工作

Posted

技术标签:

【中文标题】使用 laravel 和 jquery 分页无法按预期工作【英文标题】:Paginate doesn't work as expected uisng laravel and jq 【发布时间】:2020-05-04 22:21:48 【问题描述】:

我正在处理过滤数据。因为有<input>,如果有人开始打字,我正在调用jq 函数向我的控制器发送请求。它工作正常。即使我也得到过滤数据。但是,如果我单击第 2 页,则会影响设计。所以当我知道它是改变我的url

举个例子—— 过滤数据后(这工作正常)

code.test/?page=1

但是如果你点击第2页,它会重定向到

code.test/filter?page=2

这是main.blade-的代码-

<div class="container">
        <div class="row">
            <div class="col-md-9 col-sm-12">
                <div class="form-group">
                    <input type="text" class="form-control" id="search" placeholder="Enter email" name="email">
                </div>
            </div>
            <div class="col-md-3 col-sm-12">
                <div class="form-group">
                    <select id="department">
                        <option value="0">All Departments</option>
                        @foreach($department as $d)
                        <option value="$d->id">$d->name</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <div id="filter">
            <div class="row">
                <?php
                    $count = count($data);//dd($data[0]->fname);
                ?>
                @if($count > 0)
                    @foreach($data as $d)
                        <div class="col-md-12">
                            $d->fname, $d->lname<br>
                            $d->profile<br>
                            <b>$d->departments->name</b>
                        </div>
                    @endforeach
                @else
                    No data found
                @endif
            </div>
        </div>
         $data->appends($data)->links() 
    </div>

这是我的 jq 函数 -

function filter()
    var str = $("#search").val();
    var dep = $('#department option:selected').val();
    // /alert(dep);
    $.ajaxSetup(
        headers: 
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        
    );
    $.ajax(
        type: "GET",
        url: '/filter',
        data: 
            str: str,
            dep: dep,
        ,
        success: function(data)
            console.log(data);
            $('#filter').html(data);
        ,
    );


$(document).ready(function()
    $("#search").on('input', function()
        filter();
    );
    $("#department").change(function () 
        filter();
    );
);

现在在controller,我在过滤后返回view-

public function filter(Request $request)
        $str    =   $request->str;
        $dep    =   $request->dep;//dd($dep);

        $s  =   new Staff;
        $d  =   new Department;

        //If input and dropdown values are available
        if($str != null && $dep != 0)
            $data = $s::with('departments')
                        ->where('department', $dep)
                        ->where(function($q) use ($str) 
                            $q->where('fname', 'like', '%'.$str.'%')
                            ->orWhere('lname', 'like', '%'.$str.'%');
                        )
                        ->paginate(10)
                        ->appends(['dep'=> $dep, 'str'=> $str]);

            $data_count = count($data);

            return view('search', compact('data', 'data_count'));

         else if($str != null && $dep == 0) //If input value is set and dropdown value set to all departments
            $data = $s::with('departments')
                        ->where(function($q) use ($str) 
                            $q->where('fname', 'like', '%'.$str.'%')
                            ->orWhere('lname', 'like', '%'.$str.'%');
                        )
                        ->paginate(10)
                        ->appends(['dep'=> $dep, 'str'=> $str]);

            $data_count = count($data);

            return view('search', compact('data', 'data_count'));

         else if($str == null && $dep != 0) //If dropdown value is not null and input is null
            $data = $s::with('departments')
                        ->where('department', $dep)
                        ->paginate(10)
                        ->appends(['dep'=> $dep, 'str'=> $str]);

            $data_count = count($data);

            return view('search', compact('data', 'data_count'));

         else if($str == null && $dep == 0) //If dropdown value is null and input is null
            $data = $s::with('departments')->paginate(10)->appends(['dep'=> $dep, 'str'=> $str]);

            $data_count = count($data);

            return view('filter', compact('data', 'data_count'));
        
    

请帮帮我。

提前谢谢你。

【问题讨论】:

【参考方案1】:

现在回答有点晚了,但这可能会对你有所帮助 -

    在您的main.blade 中,您可以将该数据传递给其他view,然后将@include 新的blade 文件传递​​给main.blade,而不是直接加载数据。像这样 -
<div class="ui-block">
            <div class="ui-block-content">
                <div class="row">
                    <div class="col col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">
                        <div class="form-group">
                            <input type="text" class="form-control" id="search" placeholder="Start typing keywords.." name="search">
                        </div>
                    </div>
                    <div class="col col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                        <div class="form-group">
                            <select id="department" class="form-control">
                                <option value="0">All Departments</option>
                                @foreach($department as $d)
                                <option value="$d->id">$d->name</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>        
            </div>
        </div>

        <div id="filter">
            @include('search')
        </div>

    search.blade 为例,创建新刀片并将&lt;div id="filter"&gt; /* ---- This lines ---*/ 中的任何内容粘贴到search.blade

    在你jsmain.blade的函数更改url-

$.ajax(
        type: "GET",
        url: '/',//change this to main.blade's url
        data: 
            str: str,
            dep: dep,
        ,
        success: function(data)
            console.log(data);
            $('#filter').html(data);
        ,
    );
    controller 中进行更改。只需检查请求是否来自ajax,然后处理该数据。
public function main(Request $request)
    
        $data = Staff::with('departments')->orderBy('created_at', 'DESC')->paginate(10);
        $department = Department::all();

        //If request is from ajax, then processing to filter data
        if($request->ajax()) 
            $str    =   $request->str;
            $dep    =   $request->dep;//dd($dep);

            $s  =   new Staff;
            $d  =   new Department;

            if($str != null && $dep != 0) //If input and dropdown values are available
                $data = $s::with('departments')
                        ->where('department', $dep)
                        ->where(function($q) use ($str) 
                            $q->where('fname', 'like', '%'.$str.'%')
                            ->orWhere('lname', 'like', '%'.$str.'%')
                            ->orWhere('profile', 'like', '%'.$str.'%');
                        )
                        ->orderBy('created_at', 'DESC')
                        ->paginate(10);


             else if($str != null && $dep == 0) //If input value is set and dropdown value set to all departments
                $data = $s::with('departments')
                            ->where(function($q) use ($str) 
                                $q->where('fname', 'like', '%'.$str.'%')
                                ->orWhere('lname', 'like', '%'.$str.'%')
                                ->orWhere('profile', 'like', '%'.$str.'%');
                            )
                            ->orderBy('created_at', 'DESC')
                            ->paginate(10);

                $data_count = count($data);

                return view('search', compact('data', 'data_count'));

             else if($str == null && $dep != 0) //If dropdown value is not null and input is null
                $data = $s::with('departments')
                            ->where('department', $dep)
                            ->orderBy('created_at', 'DESC')
                            ->paginate(10);

             else if($str == null && $dep == 0) //If dropdown value is null and input is null
                $data = $s::with('departments')->orderBy('created_at', 'DESC')->paginate(10);
            

            // returning data to view
            return view('search', ['data' => $data])->render();
        

        //returning data if request is not from ajax
        return view('main', compact('data', 'department'));
    

希望这对你有用。谢谢。

【讨论】:

以上是关于使用 laravel 和 jquery 分页无法按预期工作的主要内容,如果未能解决你的问题,请参考以下文章

使用 JQUERY 和 AJAX 在 Laravel 分页中重新填充表数据

Laravel 5 分页 + 无限滚动 jQuery

php 使用JQuery的Laravel AJAX分页

Laravel Eloquent 按孩子的长度排序,然后分页

laravel5.6中jquery+ajax分页

Eloquent Laravel 按相关模型排序分页查询