Skip to content

Instantly share code, notes, and snippets.

@borgle

borgle/gist:4689628

Created February 1, 2013 06:12
Show Gist options
  • Save borgle/4689628 to your computer and use it in GitHub Desktop.
Save borgle/4689628 to your computer and use it in GitHub Desktop.
Download ZIP
this is jquery-pager-plugins demo.
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> jquery pager demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/yoker/jquery-pager-plugins/master/jquery.pager.min.js"></script>
<script type="text/javascript">
<!--
function go(p){
$("#info").html("<h1>this is "+ p + " page.</h1>");
$("#pager").pager({
listnum: 9,
totalrecords: 58,
pagesize: 5,
pageindex: p,
callback:go
});
}
$(function(){
go(1);
});
//-->
</script>
<style type="text/css">
#pager a {display:block;text-transform:uppercase;font-size:12px;float:left;}
#pager a.number {border:1px solid #ccc;text-decoration:none;margin:0 5px 0 0;padding:5px;background:#f0f0f0;color:#333;}
#pager a.hover {border:1px solid #f00;}
#pager a.empty {display:none;}
#pager a.current {border:1px solid #003f7e;color:#000;font-weight:700;background-color:#eee;}
</style>
</head>
<body>
<div id="info">this is context list.</div>
<div id="pager">page list block</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment