|
Introduction
In this example, According to the items(div) the page number will generated.when you click the page number ,the content related to that page shown.Here i am showing two item per page.If you want to show more items per page you have to make simple changes in given code.When the number of divs increased, jquery automatically generates the page numbers.And also i limit the page number with next and previous button.
|
<xsl:template name="testPaging" match="Row[@Style='testPaging']" mode="itemstyle">
<div class="divControl">
<xsl:value-of select="@Title" disable-output-escaping="yes"/>
</div>
</xsl:template> |
|
Note
With the help of above code i am taking title from the list and showing in the CQWP.
|
Generated html by the CQWP with list title. <div class="divControl">Abi</div>
<div class="divControl">Anant</div>
<div class="divControl">balraj</div>
<div class="divControl">devi</div>
<div class="divControl">manasha</div>
<div class="divControl">mani</div>
<div class="divControl">nimmi</div>
<div class="divControl">god</div>
<div class="divControl">gopal</div> |
Create one CEWP place the following code <div class="prev">prev</div>
<div id="divPages"></div>
<div class="next">next</div> |
.prev{
display:none;
float:left;
margin:5px 10px;
}
#divPages{
float:left;
}
#divPages div{
float:left;
margin:5px 10px;
}
.next{
float:left;
margin:5px 10px;
} |
$(document).ready(function(){
var totalrows = $(".divControl").length;
var pageSize=2;
var noOfPage = totalrows/pageSize;
noOfPage = Math.ceil(noOfPage);
for(var i=1;i<=noOfPage;i++)
{
$("#divPages").append('<div class="page">'+i+'</div>');
}
var totalPagenum = $("div.page").length;
if(totalPagenum >3)
{
$("div.page").hide();
for(var n=1;n<=3;n++)
{
$("div.page:nth-child("+n+")").show();
}
}
$("div.divControl").hide();
for(var j=1;j<=pageSize;j++)
{
$("div.divControl:nth-child("+j+")").show();
}
displayevent();
$("div.next").click(function(){
if($("div.selected:last").nextAll('div.page').length > 3)
{
$("div.selected").last().nextAll(':lt(3)').show();
$("div.selected").hide();
displayevent();
$("div.prev").show();
$("div.next").show();
}
else{
$("div.selected").last().nextAll().show();
$("div.selected").hide();
displayevent();
$("div.next").hide();
$("div.prev").show();
}
});
$("div.prev").click(function(){
if($("div.selected:first").prevAll('div.page').length > 3)
{
$("div.selected").first().prevAll(':lt(3)').show();
$("div.selected").hide();
$("div.prev").show();
$("div.next").show();
displayevent();
}
else{
$("div.selected").first().prevAll().show();
$("div.selected").hide();
$("div.prev").hide();
$("div.next").show();
displayevent();
}
});
$("div.page").click(function(){
var currentPage = $(this).text();
$("div.divControl").hide();
for(var k=(currentPage*2)-1;k<=(currentPage*2);k++)
{
$("div.divControl:nth-child("+k+")").show();
}
});
});
function displayevent()
{
$("div.page").each(function(){
if( $(this).css('display') === 'block') {
$(this).addClass('selected');
}
else{
$(this).removeClass('selected');
}
});
} |
|
Simple pagination
|
