PaulCatalin97's avatar

Pagination in laravel with ajax/json

I have a table and I'm showing some data from the database to a table with and method. but I wanna paginate in the view and I really don't know how.

What should I do to the view to show the pagination with buttons for each page/first page and last page?

here is my controller

public function getProducts(Request  $request)
    {
        return response()->json(Product::with('status')
            ->when($request->status, function ($q) use ($request){
                $q->where('status_id', $request->status);
            })
            ->when($request->search, function ($q) use ($request){
                $q->where('name', 'LIKE', '%'.$request->search.'%')
                    ->orWhere('description', 'LIKE', '%'.$request->search.'%');
            })
            ->orderBy($request->order_by, $request->order_way)
            ->paginate(7));
    }

And here is the body of the table and the script from the view

<table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>Nume Produs</th>
                                <th>Cantitate</th>
                                <th>Pret</th>
                                <th>Status</th>
                                <th>Descriere</th>
                                <th>Specificatii</th>
                                <th>Edit</th>
                                <th>Sterge</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">


                            </tbody>
@section('js')
    <script>
        var parameters = {
            status: null,
            search: null,
            order_by: 'id',
            order_way: 'asc'
        };
        $(document).ready(function(){
           getProducts();
        })
        function getProducts() {
            $.get('/get-products', parameters).then(res => {
                console.log(res);
                let products = res.data;
                let table_body = $('#tbody');
                var html = '';
                $.each(products, function(index, val){
                    html += "<tr> " +
                        "<td>" + val.name + "</td>" +
                        "<td>" + val.quantity + "</td>" +
                        "<td>" + val.price +"<p> Lei </p>"+"</td>" +
                        "<td>" + val.status.name + "</td>" +
                        "<td>" + val.description + "</td>" +
                        "<td>" + val.technics + "</td>" +
                        "<td>" + "<a class='btn btn-warning'>Edit</a>" + "</td>" +
                        "<td>" + "<a class='btn btn-danger'>Delete</a>" + "</td>" +
                        "</tr>";
                });
                table_body.append(html);
            });
        }
    </script>
@endsection

Also I have some parameters for the search tab but that is the next step

Sorry for some Romanian words in the html but this is the language I'm using for the app.

0 likes
2 replies
PaulCatalin97's avatar

I wanted to make my own method, but i will try with datatables, this is much simpler

Please or to participate in this conversation.