Laravel分页不刷新页面答案

【问题标题】：Laravel pagination without refreshing pageLaravel分页不刷新页面
【发布时间】：2020-03-21 18:46:13
【问题描述】：

我发现这个 Ajax 用于分页而不刷新页面。分页有效，但页面每次都在刷新，这很烦人，因为表格在页面底部。

你能检查一下，也许我犯了一些错误。或者给我一些想法来解决这个问题。

控制器：

public function index(Request $request)
{
    $satwork = DB::table('companies')
                ->leftJoin('devices', 'companies.id', '=', 'devices.companyId')
                ->leftJoin('vehicles', 'devices.id', '=', 'vehicles.deviceId')
                ->leftJoin('drivers', 'vehicles.id', '=', 'drivers.vehicleId')
                ->select('companies.company_name', 'devices.device_type', 'vehicles.license_plate', 'drivers.driver_name')
                ->paginate(5);

                return view('/welcome', compact('satwork'));

}

public function fetch_data(Request $request)
{
    if ($request->ajax()) 
    {
        $satwork = DB::table('companies')
                ->leftJoin('devices', 'companies.id', '=', 'devices.companyId')
                ->leftJoin('vehicles', 'devices.id', '=', 'vehicles.deviceId')
                ->leftJoin('drivers', 'vehicles.id', '=', 'drivers.vehicleId')
                ->select('companies.company_name', 'devices.device_type', 'vehicles.license_plate', 'drivers.driver_name')
                ->paginate(5);

        return view('pagination', compact('satwork'))->render();
    }
}

welcome.blade

<div class="container">
        <div id="table_data">
            @include('pagination')
        </div>
    </div>

</div>

<!-- pagination -->
<script>
    $(document).ready(function() {

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

        function fetch_data(page) {
            $.ajax({
                url: "//pagination?page=" + page,
                success: function(satwork) {
                    $('#table_data').html(satwork);
                }
            });
        }

    });
    }
</script>

分页刀片

    <tbody>
        @foreach ($satwork as $row)
        <tr>
            <td>{{ $row -> company_name}}</td>
            <td>{{ $row -> device_type}}</td>
            <td>{{ $row -> license_plate}}</td>
            <td>{{ $row -> driver_name}}</td>
        </tr>
        @endforeach
    </tbody>
    {!! $satwork->links() !!}

路线

Route::get('/', 'WelcomeController@index');
Route::get('/welcome/pagination', 'WelcomeController@fetch_data');

【问题讨论】：

点击分页时页面是否刷新？？
是的，这就是问题所在。
检查控制台是否有 Js 错误，并确保类 .pagination 存在与分页 DOM 元素。

标签： php ajax laravel pagination

【解决方案1】：

可以用dataTables完成

脚本：

<script>
    $(document).ready(function() {
        $('#companies').DataTable({
         "lengthMenu": [[2, 3, 5, 10, 20, -1], [2, 3, 5, 10, 20, "All"]]
        });
    });
</script>

风格：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>

它正在工作。

【讨论】：

【解决方案2】：

您获取分页的 ajax 请求 URL 不正确。

url: "//pagination?page=" + page

应该是url: "/welcome/pagination?page=" + page

function fetch_data(page) {

    var l = window.location;

    // the request path should be 
    // domain.com/welcome/pagination

    $.ajax({
        url: l.origin + l.pathname + "?page=" + page,
        success: function(satwork) {
            $('#table_data').html(satwork);
        }
    });
}

【讨论】：