Pagination of Divs

Asked

Viewed 1,078 times

2

I have a div with a ul and within 30 li. Within that li has a img.

I want when I have a new one li, in case number 31, it creates a pagination, leaving this new li inside the other div.

Someone has done something similar?

The HTML is like this:

<div>
 <ul>
  <li><img.../></li>
  <li><img.../></li>
  <li><img.../></li>
 ...
 </ul>
</div>
jquery css
  • 1

    You’re looking for these images dynamically through the bank?

  • Exactly, I have a function that does that.

2 answers

2


You can use jQuery to know when to close one ul and open another:

$(document).ready(function(){
    $("</ul><ul>").insertAfter("li:nth-child(3n+0)");
});

In this example I cut it every 3 li. You can change the 3 by 30 that works the same way.

With this code I insert the </ul><ul> after the <li>.

Example in jsFiddle.

UPDATE

As noted below, the above practice is not indicated. It is more recommended to do according to this example: http://jsfiddle.net/tgL1r5om/

$(document).ready(function(){
    var container = $('#container');
    var lista = container.find('ul').last();
    $("li").each(function(indice) {
        lista = indice > 0 && indice % 3 == 0 ? $('<ul>').appendTo(container) : lista;
        lista.append(this);
    });
});

Otherwise the browser would render a new <ul>; Agpra every 3 <li> a new list is created.

  • I understood the example, thank you. However, I think the nth-child doesn’t work on IE8, I’m sure?

  • 1

    No CSS, but no jQuery yes. http://stackoverflow.com/questions/10577674/how-to-make-internet-explorer-8-support-nth-child-css-element

  • 2

    $('</ul><ul>') is not a good one. In fact, it represents a <ul>, that the browser inserts loose inside the other (Chrome does this, I thought it was weird). I would loop, something like this: http://jsfiddle.net/tgL1r5om/

  • i did not know this @bfavaretto. I will update the answer with your, after.

1

You can use the Quick Pagination

Example

<ul class="pagination1"> 
    <li>1 - Item 1 de 25</li> 
    <li>2 - Item 2 de 25</li> 
    <li>3 - Item 3 de 25</li> 
    <li>4 - Item 4 de 25</li> 
    <li>5 - Item 5 de 25</li> 
    <li>6 - Item 6 de 25</li> 
....

Creating three example pagination

<script type="text/javascript"> 
$(document).ready(function() { 
    $("ul.pagination1").quickPagination(); 
    $("ul.pagination2").quickPagination({pagerLocation:"both"}); 
    $("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"3"}); 
}); 
</script>

First example Default option showing 10 list items and navigation at the bottom.

$("ul.pagination1 ). quickPagination();

Second example Showing 10 list items and browsing at the top and bottom.

$("ul.pagination2 ). quickPagination({pagerLocation:"Both"});

Third Example Specified 3 items in the list and navigation at the top and bottom.

$("ul.pagination3 ). quickPagination({pagerLocation:"Both",pageSize:"3});

  • I had seen this plugin, however it did not meet 100% my need, but thanks :D

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.