pagination using jquery
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
You can call the plugin in the following way:$(elementID).paginate()
You can configure the plugin with the following properties:
Download it
You can call the plugin in the following way:$(elementID).paginate()
You can configure the plugin with the following properties:
- count: The total number of pages
- start: With which number the visible pages should start
- display: How many page numbers should be visible
- border: If there should be a border (true/false)
- border_color: Color of the border
- text_color: Color of the text/numbers
- background_color: Background color
- border_hover_color: Border color when hovering
- text_hover_color: Text color when hovering
- background_hover_color: Background color when hovering
- images: If the arrows should be images or not (true/false)
- mouse: With value “press” the user can keep the mouse button pressed and the page numbers will keep on sliding. With value “slide” the page numbers will slide once with each click.
- onChange: The callback function when clicking on a page. As argument the number of the page clicked can be used.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>pagination using jquery</title>
<style>
.pagination{
width:580px;
padding:10px;
margin:10px auto;
border: 1px solid #fff;
background-color:#f7f7f7;
}
.page{
border: 1px solid #CCC;
width:310px;
margin:2px;
padding:50px 10px;
text-align:justify
background-color:white;
}
.jPaginate{
height:34px;
position:relative;
color:#a5a5a5;
font-size:small;
width:100%;
}
.jPaginate a{
line-height:15px;
height:18px;
cursor:pointer;
padding:2px 5px;
margin:2px;
float:left;
}
.jPag-control-back{
position:absolute;
left:0px;
}
.jPag-control-front{
position:absolute;
top:0px;
}
.jPaginate span{
cursor:pointer;
}
ul.jPag-pages{
float:left;
list-style-type:none;
margin:0px 0px 0px 0px;
padding:0px;
}
ul.jPag-pages li{
display:inline;
float:left;
padding:0px;
margin:0px;
}
ul.jPag-pages li a{
float:left;
padding:2px 5px;
}
span.jPag-current{
cursor:default;
font-weight:normal;
line-height:15px;
height:18px;
padding:2px 5px;
margin:2px;
float:left;
}
ul.jPag-pages li span.jPag-previous,
ul.jPag-pages li span.jPag-next,
span.jPag-sprevious,
span.jPag-snext,
ul.jPag-pages li span.jPag-previous-img,
ul.jPag-pages li span.jPag-next-img,
span.jPag-sprevious-img,
span.jPag-snext-img{
height:22px;
margin:2px;
float:left;
line-height:18px;
}
ul.jPag-pages li span.jPag-previous,
ul.jPag-pages li span.jPag-previous-img{
margin:2px 0px 2px 2px;
font-size:12px;
font-weight:bold;
width:10px;
}
ul.jPag-pages li span.jPag-next,
ul.jPag-pages li span.jPag-next-img{
margin:2px 2px 2px 0px;
font-size:12px;
font-weight:bold;
width:10px;
}
span.jPag-sprevious,
span.jPag-sprevious-img{
margin:2px 0px 2px 2px;
font-size:18px;
width:15px;
text-align:right;
}
span.jPag-snext,
span.jPag-snext-img{
margin:2px 2px 2px 0px;
font-size:18px;
width:15px;
text-align:right;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script src="jquery.paginate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#pager").paginate({
count : 10,
start : 1,
display : 7,
border : true,
border_color : '#fff',
text_color : '#fff',
background_color : 'black',
border_hover_color : '#ccc',
text_hover_color : '#000',
background_hover_color : '#fff',
images : false,
mouse : 'press',
onChange : function(page){
$('._current','#pagination').removeClass('_current').hide();
$('#p'+page).addClass('_current').show();
}
});
});
</script>
</head>
<body>
<div id="pagination" class="pagination">
<div id="p1" class="page _current" style="">A computer is a machine that manipulates data according to a set of instructions.
Although mechanical examples of computers have existed through much of recorded human history, the first electronic computers were developed in the mid-20th century (1940–1945). These were the size of a large room, consuming as much power as several hundred modern personal computers</div>
<div id="p2" class="page" style="display:none;">The first use of the word "computer" was recorded in 1613, referring to a person who carried out calculations, or computations, and the word continued to be used in that sense until the middle of the 20th century. From the end of the 19th century onwards though, the word began to take on its more familiar meaning, describing a machine that carries out computations.</div>
<div id="p3" class="page" style="display:none;">The history of the modern computer begins with two separate technologies—automated calculation and programmability—but no single device can be identified as the earliest computer, partly because of the inconsistent application of that term. Examples of early mechanical calculating devices include the abacus, the slide rule and arguably the astrolabe and the Antikythera mechanism (which dates from about 150–100 BC). Hero of Alexandria (c. 10–70 AD) built a mechanical theater which performed a play lasting 10 minutes and was operated by a complex system of ropes and drums that might be considered to be a means of deciding which parts of the mechanism performed which actions</div>
<div id="p4" class="page" style="display:none;">The "castle clock", an astronomical clock invented by Al-Jazari in 1206, is considered to be the earliest programmable analog computer. It displayed the zodiac, the solar and lunar orbits, a crescent moon-shaped pointer travelling across a gateway causing automatic doors to open every hour, and five robotic musicians who played music when struck by levers operated by a camshaft attached to a water wheel. The length of day and night could be re-programmed to compensate for the changing lengths of day and night throughout the year.</div>
<div id="p5" class="page" style="display:none;">The Renaissance saw a re-invigoration of European mathematics and engineering. Wilhelm Schickard's 1623 device was the first of a number of mechanical calculators constructed by European engineers, but none fit the modern definition of a computer, because they could not be programmed.
In 1801, Joseph Marie Jacquard made an improvement to the textile loom by introducing a series of punched paper cards as a template which allowed his loom to weave intricate patterns automatically. The resulting Jacquard loom was an important step in the development of computers because the use of punched cards to define woven patterns can be viewed as an early, albeit limited, form of programmability.</div>
<div id="p6" class="page" style="display:none;">It was the fusion of automatic calculation with programmability that produced the first recognizable computers. In 1837, Charles Babbage was the first to conceptualize and design a fully programmable mechanical computer, his analytical engine. Limited finances and Babbage's inability to resist tinkering with the design meant that the device was never completed.</div>
<div id="p7" class="page" style="display:none;">In the late 1880s, Herman Hollerith invented the recording of data on a machine readable medium. Prior uses of machine readable media, above, had been for control, not data. "After some initial trials with paper tape, he settled on punched cards ..." To process these punched cards he invented the tabulator, and the keypunch machines. These three inventions were the foundation of the modern information processing industry. Large-scale automated data processing of punched cards was performed for the 1890 United States Census by Hollerith's company, which later became the core of IBM. By the end of the 19th century a number of technologies that would later prove useful in the realization of practical computers had begun to appear: the punched card, Boolean algebra, the vacuum tube (thermionic valve) and the teleprinter.</div>
<div id="p8" class="page" style="display:none;">During the first half of the 20th century, many scientific computing needs were met by increasingly sophisticated analog computers, which used a direct mechanical or electrical model of the problem as a basis for computation. However, these were not programmable and generally lacked the versatility and accuracy of modern digital computers.
Alan Turing is widely regarded to be the father of modern computer science. In 1936 Turing provided an influential formalisation of the concept of the algorithm and computation with the Turing machine. Of his role in the modern computer, Time magazine in naming Turing one of the 100 most influential people of the 20th century, states: "The fact remains that everyone who taps at a keyboard, opening a spreadsheet or a word-processing program, is working on an incarnation of a Turing machine".</div>
<div id="p9" class="page" style="display:none;">Several developers of ENIAC, recognizing its flaws, came up with a far more flexible and elegant design, which came to be known as the "stored program architecture" or von Neumann architecture. This design was first formally described by John von Neumann in the paper First Draft of a Report on the EDVAC, distributed in 1945. A number of projects to develop computers based on the stored-program architecture commenced around this time, the first of these being completed in Great Britain. The first to be demonstrated working was the Manchester Small-Scale Experimental Machine (SSEM or "Baby"), while the EDSAC, completed a year after SSEM, was the first practical implementation of the stored program design. Shortly thereafter, the machine originally described by von Neumann's paper—EDVAC—was completed but did not see full-time use for an additional two years.</div>
<div id="p10" class="page" style="display:none;">Nearly all modern computers implement some form of the stored-program architecture, making it the single trait by which the word "computer" is now defined. While the technologies used in computers have changed dramatically since the first electronic, general-purpose computers of the 1940s, most still use the von Neumann architecture.</div>
<div id="pager">
</div>
</div>
</body>
</html>
Hi Ankit,
ReplyDeleteIf I want to set the total no of pages, how can I acheive that , the total no of page will be avialable with me on the servlet.