Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • mikkel 143 posts 365 karma points
    Mar 14, 2019 @ 17:43
    mikkel
    0

    Why does my pageing code not work

    Hi every one I have the problem with the code when I press forward and back then the code works, but when I press one of the numbers nothing happens. how can it be ?

    i dont now if you want to se the entire code on the page but here it is.

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.Blog>
    @using ContentModels = Umbraco.Web.PublishedContentModels;
    @using System.Globalization;
        @{
        Layout = "master.cshtml";
    
    
    
        var selection = Model.Content.Site().FirstChild("blog").Children().Where(x => x.IsVisible()).OrderBy("CreateDate desc");
    
    
    }
            <!-- Main Content -->
            @{
                int pageSize = 1; // How many items per page
                int page; // The page we are viewing
                          /* Set up parameters */
                if (!int.TryParse(Request.QueryString["page"], out page))
                {
                    page = 1;
                }
                /* This is your basic query to select the nodes you want */
                //var nodes = Model.Content.Children.Where(x => x.DocumentTypeAlias == "nyBegivenhed").OrderBy("CreateDate desc");
                int totalNodes = selection.Count();
                int totalPages = (int)Math.Ceiling((double)totalNodes / (double)pageSize);
                /* Bounds checking */
                if (page > totalPages)
                {
                    page = totalPages;
                }
                else if (page < 1)
                {
                    page = 1;
                }
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-10 mx-auto">
                        <h1 class="main-page-heading">@Model.Content.Name</h1>
                        @foreach (var item in selection.Skip((page - 1) * pageSize).Take(pageSize))
                        {
                        <div class="post-preview">
                            <h2 class="post-title">@item.Name</h2><p class="post-meta">Skrevet af:&nbsp;@item.CreatorName &nbsp;d.&nbsp;@item.CreateDate.ToString("dd. MMMM yyyy", new CultureInfo("da-dk"))</p>
                            <p id="text-transform-teaser">@Umbraco.TruncateByWords(Html.GetGridHtml(item, "skrivArtikelBodyText").ToString(), 20)</p>
                            <a href="@item.Url" class="btn btn-danger btn-pagination">Læs mere</a>
                        </div>
                        <hr />
                        }
                        @{
                        if (totalPages > 1)
                        {
                        <div class="pagination-class">
                            <ul class="pagination">
                                @if (page > 1)
                                {
                                <li><a style="margin-right: 10px;" class="btn btn-danger btn-pagination" href="?page=@(page-1)">Tilbage</a></li>
                                }
                                @for (int p = 1; p < totalPages + 1; p++)
                                {
                                <li style="margin-right: 10px;" class="@(p == page ? " active" : string.Empty) btn btn-danger btn-pagination">
                                    <a href="?page=@p">@p</a>
                                </li>
                                }
                                @if (page < totalPages)
                                {
                                <li><a style="margin-right: 10px;" class="btn btn-danger btn-pagination" href="?page=@(page+1)">Næste</a></li>
                                }
                            </ul>
                        </div>
                        }
                        }
                    </div>
                </div>
            </div>
            }
    
  • Nigel Wilson 945 posts 2077 karma points
    Mar 14, 2019 @ 18:01
    Nigel Wilson
    0

    Hi Mikkel

    From a quick look nothing obvious jumps out.

    Would it make it easier to debug if you set a page size to more than 1 ? Maybe 5 ?

    Also when striking issues, I often output the core variables on the page to help track down where the issue is - it might help, it might not.

    Are the hyperlinks forming correctly, ie the href is valid, and then when clicked it is in the URL as expected on reload ?

    Cheers Nigel

  • mikkel 143 posts 365 karma points
    Mar 14, 2019 @ 18:10
    mikkel
    0

    I have tried to change the page from 1 to 5 and it works fine enough with the buttons back and forth, it just doesn't work with the numbers. the links should be right :D

  • mikkel 143 posts 365 karma points
    Mar 14, 2019 @ 18:15
    mikkel
    0

    when i debug it shows fine the numbers of page, but i cant se anything with the querystring link

  • mikkel 143 posts 365 karma points
    Mar 14, 2019 @ 18:36
    mikkel
    0

    now it works it was some styling that was the problem. but now i cant get the class active to show :D

  • Nigel Wilson 945 posts 2077 karma points
    Mar 14, 2019 @ 18:44
    Nigel Wilson
    0

    Hi Mikkel

    Small steps aye... :-)

    I often put the class name as a separate variable, again to help when dubugging, but also for me it makes things easier to read and understand, so maybe try this ?

    @for (int p = 1; p < totalPages + 1; p++)
    {
         string cssClass = string.Format("btn btn-danger btn-pagination{0}, (p == page ? " active" : string.Empty));
         <li style="margin-right: 10px;" class="@cssClass">
              <a href="?page=@p">@p</a>
         </li>
    }
    

    Cheers

    Nigel

  • mikkel 143 posts 365 karma points
    Mar 15, 2019 @ 10:20
    mikkel
    0

    Hi Nigel It works now it was bootstrap 3 i was using in my pageing and on my website i was using bootstrap 4 så that was my problem. It works very fine now. Thanks for helping me out.

    Here is my code that works

    @{
        int pageSize = 3; // How many items per page
        int page; // The page we are viewing
                  /* Set up parameters */
        if (!int.TryParse(Request.QueryString["page"], out page))
        {
            page = 1;
        }
        /* This is your basic query to select the nodes you want */
        //var nodes = Model.Content.Site().FirstChild("galleri").Children<NytBilledeGalleri>().Where(x => x.IsVisible()).OrderBy("CreateDate desc");
        int totalNodes = nytToej.Count();
        int totalPages = (int)Math.Ceiling((double)totalNodes / (double)pageSize);
        /* Bounds checking */
        if (page > totalPages)
        {
            page = totalPages;
        }
        else if (page < 1)
        {
            page = 1;
        }
    <div class="container">
        <div class="row">
            @foreach (var item in nytToej.Skip((page - 1) * pageSize).Take(pageSize))
            {
                <div class="col-lg-4 col-md-4">
                    <div class="card">
                        <img src="@Umbraco.TypedMedia(item.GetPropertyValue<int>("billedeNytProdukt")).Url" class="card-img-top" style="width: 100%;" />
                        <div class="card-body">
                            <h5 class="card-title">@item.Name</h5>
                            <p class="card-text">
                                @Umbraco.TruncateByWords(item.TekstNytProdukt, 15)
                                <a href="@item.Url" class="btn btn-danger btn-pagination">Vis</a>
                        </div>
                    </div>
                </div>
                <br />
            }
        </div>
        @{
            if (totalPages > 1)
            {
                <nav aria-label="...">
                    <ul class="pagination">
                        @if (page > 1)
                        {
                            <li class="page-item"><a class="page-link" tabindex="-1" href="?page=@(page-1)">Tilbage</a></li>
                        }
                        @for (int p = 1; p < totalPages + 1; p++)
                        {
                            <li class="page-item @(p == page ? " active" : string.Empty)">
                                <a class="page-link" href="?page=@p">@p</a>
                            </li>
                        }
                        @if (page < totalPages)
                        {
                            <li><a class="page-link" href="?page=@(page+1)">Næste</a></li>
                        }
                    </ul>
                </nav>
            }
        }
    </div>
    }
    

    i am not sure if the jquery is requried but here it is

    <script>
        $('#topheader .navbar-nav a').on('click', function () {
            $('#topheader .navbar-nav').find('li.active').removeClass('active');
            $(this).parent('li').addClass('active');
        });
    </script>
    
  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies