Copied to clipboard

Flag this post as spam?

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


  • mikkel 118 posts 340 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 915 posts 2002 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 118 posts 340 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 118 posts 340 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 118 posts 340 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 915 posts 2002 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 118 posts 340 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>
    
Please Sign in or register to post replies

Write your reply to:

Draft