Php 不刷新页面的Laravel分页

我发现这个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();
    }
}

欢迎光临。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() !!}

---

获取分页的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);
        }
    });
}

---

这可以通过数据表来完成

脚本：

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

$（文档）.ready（函数（）{
$（“#公司”）。数据表({
“长度菜单”：[[2,3,5,10,20，-1]，[2,3,5,10,20，“全部”]]
});
});

风格：

<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>

---

它正在工作。

分页时页面是否会刷新单击？是的，这就是问题所在。检查控制台是否存在Js错误，并确保类

。分页

与分页DOM元素一起存在。

<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>