I have a div with a ul and within 30 li . Within this li has a img .
I want you to have a new page with% new, in this case number 31, it will create a pagination, leaving this new li within the other li .
Has anyone ever done anything like this?
HTML looks like this:
<div>
<ul>
<li><img.../></li>
<li><img.../></li>
<li><img.../></li>
...
</ul>
</div>
You can use jQuery to know when to close a ul and open another:
$(document).ready(function(){
$("</ul><ul>").insertAfter("li:nth-child(3n+0)");
});
In this example I cut it every 3% with%. You can change the 3 by 30 that works the same way.
With this code I enter li after </ul><ul> .
UPDATE
According to the comments below, the above practice is not indicated. It is most recommended to do this example: link
$(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 rendered a new <li> ; agpra every 3% with% new list is created.
You can use the Quick Pagination
<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 paging
<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 navigation 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"});