Filtering data with selected order and returning data with pagination

Blade:

                        <select id="price_sort" class="custom-select" name="price_sort">
                            <option value="default" selected>By price</option>
                            <option value="asc">Ascending</option>
                            <option value="desc">Descending</option>
                        </select>

ajax request:

        $(document).ready(function () {
            $('#price_sort').change(function () {
                var price_sort = $(this).val();

                $.ajax({
                    method: 'post',
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    url: '/products/price-sort',
                    data: {
                        order: price_sort
                    },
                    success: function(products) {
                        // process your data
                        console.log(products);
                    },
                    error: function(jqxhr, status, exception) {
                        alert('Error ' + exception);
                    }
                });
            });
        });

Controller:

    // price sort select
    public function priceSort(Request $request)
    {   
        if ($request->input('order') == 'desc') {
            $products = Product::orderBy('price', 'desc')->get();
        } else if ($request->input('order') == 'asc') {
            $products = Product::orderBy('price', 'asc')->get();
        }

        if (!empty($products)) {
            return $products;
        }        
        
    }

It's working, it does return products in a console log. But the question is, how do i display it as a view with pagination? Currently i am displaying 12 products per page, but when i trigger price filtering it should replace current products with a new ones with different ordering by price.

Sergiu17

7 years ago

Level 60

First, I'd switch to VueJs

<select @change="change" v-model="order">
    <option value="">- Default -</option>
    <option value="ASC" >ASC</option>
    <option value="DESC" >DESC</option>
</select>

<div v-for="product in products">
    @{{ product.price }}
</div>

new Vue({
    el: '#app',

    data: {
        products: [],
        order: '',
    },

    mounted () {
        axios.get('/products').then(response => (this.products = response.data))
    },

    methods: {
        change() {
            axios.get('/products?sortByPrice=' + this.order).then(response => (this.products = response.data))
        }
    }
})

Route::get('/products', function (\Illuminate\Http\Request $request) {
    $order = $request->sortByPrice;

    if ($order == 'ASC' or $order == 'DESC')
    {
        return \App\Product::orderBy('price', $order)->get();
    }
    return \App\Product::all();
});

Something like this)

1 like

AlexanderKim

7 years ago

Level 3

@Sergiu17

Thanks, but that filter part is a last thing to do on my project to finish it, i went jquery way, i will dive to Vue on the next project for sure.

I figured out on how to output pagination, but when i click on pagination item, it returns the following link: products/prices-sort?page=2 instead of products?page=2, that's because i'm POSTing data to products/price-sort url i guess. Do i need to make GET route in order to make it work? What's the correct way?

Please or to participate in this conversation.