Anyone can help? Please really need help on this.

Hi,

I suspect the reason you've not got any responses as what you're trying to do sounds a little bit out there!

Can you explain what you need to do a bit more clearly - there might be a much easier and cleaner way of doing it?

The grid is a bit of an animal and not suited to all applications. I would suggest if you're hell bent on doing what you're trying to do you render the grid output on the page and then hide all content and create pagination links in Javascript to show and hide the relevant

Hi Steve,

thank you for your answer. Let's say I have a list of items organized within a grid editor, for example having each line of the grid with 3 items (each item clickable to other pages).

I started with a small list but now my list of items is too big so I want to add paging for better navigation. So I'm looking for a solution that shows the content of my grid in different pages. I would like to work with grid because it's easier for the person who will maintain the website contents to keep updating them easily. All the items of this list are partial views, so another question I have is if I have to create a template to add the pagination, or add the pagination code to my partial view file.

I hope this is not too confusing. If so, I will try to explain better.

Thank you very much for your help! I'm new with Umbraco and web development and so far I've managed to keeps things moving, but now I'm really stuck with this feature.

Hi,

The grid is stored as a big JSON block so to access part of it you're probably going to have to parse the JSON to get certain rows to power pagination.

If the grid content isn't too large I'd consider doing this in Javascript client side (output the whole content and show/hide what you need) - otherwise what you're describing (in my humble opinion) would be much easier to develop, maintain and content admin in a more simple child node structure.

That said - perhaps someone else here will have a better suggestion for you?!

Steve

The content won't be too large, maybe I will need between 5 and 10 pages with 4 grid lines each. So if I want to do the pagination with javascript, I just need to create the contents as I usually do, and then in the template I have to add the javascript right? Is it possible for you to point to me any code snippet with this feature? By simple child node sctructure you mean creating the pages statically and moving contents from pages when I do update them and creating a child node everytime I add a new page?

Thank you very much!

HI,

A very quick Google turned this up:

http://esimakin.github.io/twbs-pagination/#demo

or this: http://botmonster.com/jquery-bootpag/#example-simple

Basically change the logic where it changes the text to something that hides all the grid rows and then only shows the "page" splice you want... something like:

$( "div.umb-grid .row" ).hide( ); $( "div.umb-grid .row" ).slice( num * 5, num * 5 + 5 ).show( );

// see https://api.jquery.com/slice/

Hi Nelson,

first of all I think the grid isn't the right tool for what you try to do. Maybe you should overthink your concept and try to find a better solution.

If you really want to do paging of the grid the easiest way would be to use the skybrud grid model which lets you use an object for your grid data. With that i think you can way better iterate through the lines if your grid and then maybe skip/take the lines based in the "page" you are.

Regards David

Nelson,

As others keep saying - this is not what the grid is for! It's too flexible (you can put rows and columns within rows etc etc etc... )

BUT - if you insist this should work though I haven't tested it and can't promise it covers all bases. Note if editors embed rows within rows then this won't work ... This is using the twbs-pagination from the first link. * NOTE I am unable to fully test this.

• Another note- if you have multiple grids on the page this won't work - you'll need to add an id selector container div.

  $(document).ready(function () {
  var itemsPerPage = 3;
  // work out how many pages there are
  var totalPages = Math.ceil($("div.umb-grid div.grid-section").children('div').length / itemsPerPage);
  
  
  $('#pagination-demo').twbsPagination({
      totalPages: totalPages,
      onPageClick: function (event, page) {
          var num = page - 1;
          // this selector basically finds the grid and "slices" the divs underneath the gridsection div which *should* relate to rows / pages in the grid
          $("div.umb-grid div.grid-section").children('div').hide();
          $("div.umb-grid div.grid-section").children('div').slice(num * itemsPerPage, num * itemsPerPage + itemsPerPage).show();
      }
  });
  

  });

I still think you'd be better off changing this to a parent - child node model where to create new "pages" you get the editors to create child nodes under the page. That way they can use the inbuild sort functionality - remove pages at will and you can control the output much more cleanly.

The tutorial I helped write has this: https://our.umbraco.org/documentation/tutorials/creating-basic-site/Articles-Parent-and-Article-Items

Kind regards

Steve

Hi,

Follow the instructions on how to use the JS plugin.

http://esimakin.github.io/twbs-pagination/#demo

All I've done is modify the demo code shown to make it work with what you need. You'll obviously need to include the JS plugin on the page.

Steve

Hi Steve,

I included the JS plugin in my page, using the following code:

<script src="/js/jquery.twbsPagination.min.js"></script>
<script>
    $(document).ready(function() {
        $('#pagination-demo').twbsPagination({
                   totalPages: "51",
                   visiblePages: "10",
                   onPageClick: function (event, page) {
                        $('#page-content').text('Page ' + page);
                    }
           });
           });

And I'm testing this with the Blog Overview code from the fanoe starter kit, so my code looks like this:

<div class="container">

        <div class="row">
            @foreach(var post in CurrentPage.Children) 
            {
                <div class="col-sm-4">
                    <div class="content equal">
                        <a href="@post.Url">
                            <div class="white">
                                <div class="date">@post.CreateDate.ToLongDateString()</div>
                                <h2>@post.Name</h2>     
                                <p>@Umbraco.Truncate(post.Introduction, 240, true)</p>
                            </div>
                        </a>
                    </div>
                </div>
            }
        </div>

        <ul id="pagination-demo" class="pagination-sm"></ul>
    </div>

However I doesnt seem to work, because I quite not fully understood how to create the pages according to the child nodes I have. I defined in the developer Section a number of 6 items per page, and when I add more than 6 the page still displays more than 6 pages and also the pagination is not showing in my page. I'm sorry if this is such a dumb question, but I'm really a nooby in web development.

Thanks you very much!

I think Steve is right. The better solution here would be a simple child node structure.

You could create a page that only shows content. Below that page you create pagination-pages with a grid on each page.

The structure could look like this:

• My first page
  • Pagination 1
  • Pagination 2
  • Pagination 3
• My second page
  • Pagination 1
  • Pagination 2

You could also make a grid on the content page and make some logic that looks for child pagination pages. In that way you can use the same nodetype for pages without pagination.

Haven't tested this, but it should work:

@{
    int pageCount = 1;
    var paginationPage = Request.Params["pagination"];
    var paginationCollection = CurrentPage.Descendants("pagination");
}

@if(String.IsNullOrEmpty(paginationPage)){
    @CurrentPage.GetGridHtml("work")
}else{
    int skipPage = paginationPage.AsInt() - 2;
    @paginationCollection.Skip(skipPage).Take(1).GetGridHtml("work")
}

@if(paginationCollection.Count > 0){
    <ul>
        <li><a href="@CurrentPage.Url">@pageCount</a></li>
        @foreach(var pagination in paginationCollection){
            pageCount++;
            <li><a href="@[email protected]">@pageCount</a></li>
        }
    </ul>
}

Hi Nelson,

The JS code I posted was for the Umbraco Grid which definitely wasn't the right way to go... depending on how many child nodes you have this still might not be quite the right way to go. You need to think about page load times (if there were say 200 child nodes then this solution is potentially loading a lot of content (especially if you're going to have images this will affect the browser as well as the page size).

If you will have a lot of child pages then you should only load what you need and then load the rest via AJAX - there are plenty of solutions using Umbraco (using either alternative templates or an API) - the docs of that plugin will show you how to call ajax from the page links. You could also look at lazy loading images..

For simplicity though to help you along let's fix the JS so your solution works.

So the key bits are: 1) ensure you have included JQuery - jquery plugins only work if JQuery is included before the plugins. 2) You need a way of the plugin knowing what the div that contains your paged records is. I've added an Id called "pagination-results" to the container's row div. This is very important.
3) You then also need to change the JS to identify the records (these are divs with the class "col-sm-4" though it might be an idea to give this a specific class.

So change your Razor to:

<div class="container">

    <div class="row" id="pagination-results">
        @foreach(var post in CurrentPage.Children) 
        {
            <div class="col-sm-4">
                <div class="content equal">
                    <a href="@post.Url">
                        <div class="white">
                            <div class="date">@post.CreateDate.ToLongDateString()</div>
                            <h2>@post.Name</h2>     
                            <p>@Umbraco.Truncate(post.Introduction, 240, true)</p>
                        </div>
                    </a>
                </div>
            </div>
        }
    </div>

    <ul id="pagination-demo" class="pagination-sm"></ul>
</div>

Your JS script (if you already have Jquery delete the CDN line).

<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>








<script src="jquery.twbsPagination.min.js"></script>









<script>
    $(document).ready(function() {
        var itemsPerPage = 3;
        // work out how many pages there are
        var totalPages = Math.ceil($("#pagination-results").children('div.col-sm-4').length / itemsPerPage);

        $('#pagination-demo').twbsPagination({
            totalPages: totalPages,
            onPageClick: function (event, page) {
                var num = page - 1;
                // this selector basically finds the records and "slices" the divs underneath the container div 
                $("#pagination-results").children('div.col-sm-4').hide();
                $("#pagination-results").children('div.col-sm-4').slice(num * itemsPerPage, num * itemsPerPage + itemsPerPage).show();
            }
        });
    });

</script>

Here's a self contained html demo version. If you have problems with the above see how this is workign (copy it into a html file).

<html>
<body>

<h1>Test</h1>

<div class="container">

        <div class="row" id="pagination-results">

                <div class="col-sm-4">
                    <div class="content equal">
                        <a href="@post.Url">
                            <div class="white">
                                <div class="date">Some date goes here</div>
                                <h2>1 This is the Post Name</h2>     
                                <p>Some intro text..</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="content equal">
                        <a href="@post.Url">
                            <div class="white">
                                <div class="date">Some date goes here</div>
                                <h2>2 This is the Post Name</h2>     
                                <p>Some intro text..</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="content equal">
                        <a href="@post.Url">
                            <div class="white">
                                <div class="date">Some date goes here</div>
                                <h2>3 This is the Post Name</h2>     
                                <p>Some intro text..</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="content equal">
                        <a href="@post.Url">
                            <div class="white">
                                <div class="date">Some date goes here</div>
                                <h2>4 This is the Post Name</h2>     
                                <p>Some intro text..</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="content equal">
                        <a href="@post.Url">
                            <div class="white">
                                <div class="date">Some date goes here</div>
                                <h2>5 This is the Post Name</h2>     
                                <p>Some intro text..</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="content equal">
                        <a href="@post.Url">
                            <div class="white">
                                <div class="date">Some date goes here</div>
                                <h2>6 This is the Post Name</h2>     
                                <p>Some intro text..</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="content equal">
                        <a href="@post.Url">
                            <div class="white">
                                <div class="date">Some date goes here</div>
                                <h2>7 This is the Post Name</h2>     
                                <p>Some intro text..</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="content equal">
                        <a href="@post.Url">
                            <div class="white">
                                <div class="date">Some date goes here</div>
                                <h2>8 This is the Post Name</h2>     
                                <p>Some intro text..</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="content equal">
                        <a href="@post.Url">
                            <div class="white">
                                <div class="date">Some date goes here</div>
                                <h2>9 This is the Post Name</h2>     
                                <p>Some intro text..</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="content equal">
                        <a href="@post.Url">
                            <div class="white">
                                <div class="date">Some date goes here</div>
                                <h2>10 This is the Post Name</h2>     
                                <p>Some intro text..</p>
                            </div>
                        </a>
                    </div>
                </div>

        </div>

        <ul id="pagination-demo" class="pagination-sm"></ul>
    </div>



<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>




<script src="jquery.twbsPagination.min.js"></script>





<script>
    $(document).ready(function() {
        var itemsPerPage = 3;
        // work out how many pages there are
        var totalPages = Math.ceil($("#pagination-results").children('div.col-sm-4').length / itemsPerPage);

        $('#pagination-demo').twbsPagination({
            totalPages: totalPages,
            onPageClick: function (event, page) {
                var num = page - 1;
                // this selector basically finds the records and "slices" the divs underneath the container div 
                $("#pagination-results").children('div.col-sm-4').hide();
                $("#pagination-results").children('div.col-sm-4').slice(num * itemsPerPage, num * itemsPerPage + itemsPerPage).show();
            }
        });
    });

</script>



</body>
</html>

is working on a reply...