how would i apply pagination

Prachi Vyas 10 posts 110 karma points

May 11, 2019 @ 06:49

Umbraco 8

Please help me for apply pagination on my this cards. Here I have added my code for cards.

   @{
        var selection = Umbraco.Content(Guid.Parse("3758071d-10c8-4890-b680-64f43a7b4149"))
        .Children("vehicles")
        .Where(x => x.IsVisible())
        .OrderByDescending(x => x.Id);
    }
    <div class="vehical_result">
        <div class="row">

            @foreach (var item in selection)
            {

                <div class="col-xl-4 col-lg-6">
                    <div class="caroffer_box">
                        <div class="img_car">

                            <a href="vehiclesdetails">
                                <img src="@item.Value("vehicleImage")" alt="">
                            </a>
                            <div class="price_box">
                                <p>From<br><span>[email protected]("pricePerWeek")p/w</span></p>

                            </div>
                        </div>
                        <div class="car_details">
                            <h4>@item.Value("carName")</h4>
                            <h6>Year: @item.Value("launchYear")</h6>
                            <p>@item.Value("description")</p>
                            <p class="price">For sale <span>[email protected]("salePrice")</span></p>
                            <div class="caricon_section">
                                <ul>
                                    <li>
                                        <img src="/images/meter.svg" alt="">
                                        <p>@item.Value("meter") K mi</p>
                                    </li>
                                    <li>
                                        <img src="/images/speed.svg" alt="">
                                        <p>@item.Value("speed")cc</p>
                                    </li>
                                    <li>
                                        <img src="/images/petrol.svg" alt="">
                                        <p>@item.Value("petrol")</p>
                                    </li>
                                    <li>
                                        <img src="/images/auto.svg" alt="">
                                        <p>@item.Value("automatic")</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            }

        </div>
        <div class="row">
            <div class="col-md-12 text-right vehicles_pagination">
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item"><a class="page-link active" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item"><a class="page-link" href="#">6</a></li>
                    <li class="page-item"><a class="page-link" href="#">7</a></li>
                    <li class="page-item"><a class="page-link" href="#">8</a></li>
                    <li class="page-item"><a class="page-link" href="#">9</a></li>
                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                </ul>
            </div>
        </div>
    </div>

Copy Link

Søren Gregersen 441 posts 1884 karma points MVP 2x c-trib

May 11, 2019 @ 11:58

Hi,

You would use Skip and Take (linq methods) om your selection variable. I would although not recommend this approach.

Say you have 100 cars, you would then always load 100 cars and just take selection of them. Say you have a 1000 cars, the problem is 10 fold.

Using the selection generated in the back office should not be used on large datasets.

Instead you should use examine to find the cars, do sorting, pagination etc.

Have a look at this article: https://24days.in/umbraco-cms/2013/getting-started-with-examine/

HTH :-)

Copy Link

is working on a reply...

Flag this post as spam?

How would I apply pagination