This article explain Paging in ASP. NET web
application. In this article we see a image and text. Text will be change when
we click on the next for pagination. But image will be same. We can creates
hyperlink to the text. We can also create hyperlink with image.
Step-1
6 pieces of content, all content are defined
inside the div. Now adding following code in head section.
<script type="text/javascript" src="Scripts/virtualpaginate.js">
</script>
<style type="text/css">
.paginationstyle{
width:
250px;
text-align:
center;
padding:
2px 0;
margin:
10px 0;
}
.paginationstyle select{
border:
1px solid navy;
margin:
0 15px;
}
.paginationstyle a{ /*Pagination links style*/
padding:
0 5px;
text-decoration:
none;
border:
1px solid black;
color:
navy;
background-color:
white;
}
.paginationstyle a:hover,
.paginationstyle a.selected{
color:
#000;
background-color:
#FEE496;
}
.paginationstyle a.disabled,
.paginationstyle a.disabled:hover{
background-color:
white;
cursor:
default;
color:
#929292;
border-color:
transparent;
}
.paginationstyle a.imglinks{
border:
0;
padding:
0;
}
.paginationstyle a.imglinks img{
vertical-align:
bottom;
border:
0;
}
.paginationstyle a.imglinks a:hover{
background:
none;
}
.paginationstyle .flatview a:hover,
.paginationstyle
.flatview a.selected{
color:
#000;
background-color:
yellow;
}
.hidepiece
{
height: 98px;
}
</style>
Step-2
Now add the following code in the body section of the page.
<div>
<h3>Demo</h3>
<div id="scriptspaginate2" class="paginationstyle" style="width:
400px"></div>
<div style="width:
450px; border:
1px dashed gray; padding:
10px; background-color:
#EEFFAA">
<p class="virtualpage2
hidepiece">
<img src="image/Rohtashimage.jpg" style="width:
50px; height:
61px;" />
<a href
="http://www.vbdotnetheaven.com/Articles/ArticleListing.aspx?AuthorID=rohatash" target="_blank" >Rohatash Kumar</a></b> <span class="credits">Link
for article</span><br>This
link will be redirect to the Visual basic article.
</p>
<p class="virtualpage2
hidepiece">
<img src="image/Rohtashimage.jpg" style="width:
47px" />
<b><a href="http://www.c-sharpcorner.com/" target="_blank" >Rohatash Kumar</a></b> <span class="credits">Link
to c# corner</span><br>
This link will be redirect to
the c#corner.com.
</p>
<p class="virtualpage2
hidepiece">
<img src="image/Rohtashimage.jpg" style="width:
45px" />
<b><a href="http://www.dbtalks.com/" target="_blank" >Rohatash Kumar</a></b> <span class="credits">Link
to Data base</span>
<br />
This link will be redirect to
the Dbtaks.com.</p>
<p class="virtualpage2
hidepiece">
<img src="image/Rohtashimage.jpg" style="width:
45px" />
<b><a href="http://www.interviewcorner.com/" target="_blank" >Rohatash Kumar</a></b> <span class="credits">Link
to interview corner</span><br>
This link will be redirect to
the interview corner.</p>
<p class="virtualpage2
hidepiece">
<img src="image/Rohtashimage.jpg" style="width:
45px" />
<b><a href="http://www.longhorncorner.com/" target="_blank">Rohatash
Kumar</a></b> <span class="credits">Link
to longhorn corner</span><br>
This link will be redirect
to the longhorn corner.</p>
<p class ="virtualpage2 hidepiece">
<img src="image/Rohtashimage.jpg"style="width:
45px" /></a>
<b><a href="http://www.mindcracker.com/" target="_blank" >Rohatash Kumar</a></b> <span class="credits">Link
to mindcracker</span><br>
This link will be redirect to
the mind cracker.</p>
<br>
</div>
<div id="scriptspaginate" class="paginationstyle" style="width:
400px">
<a href="#" rel="previous">Prev</a> <span class="paginateinfo" style="margin:
0 30px; font-weight:
bold"></span> <a href="#" rel="next">Next</a>
</div>
<script type="text/javascript">
var newscripts = new virtualpaginate({
piececlass:
"virtualpage2",
piececontainer:
'p',
pieces_per_page: 1,
defaultpage: 0,
wraparound:
false,
persist: true
})
newscripts.buildpagination(["scriptspaginate",
"scriptspaginate2"])
</script>
</div>
Step-3
Download .js file from attach zip file and attach it with application.
Now run the application and test it.
Image1
Now click on the next. we will see that same image but different
text.
Image2
Now click on the link.
Image3