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: @item.CreatorName d. @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>
}
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
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 ?
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
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.
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
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
when i debug it shows fine the numbers of page, but i cant se anything with the querystring link
now it works it was some styling that was the problem. but now i cant get the class active to show :D
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 ?
Cheers
Nigel
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
i am not sure if the jquery is requried but here it is
is working on a reply...