jQuery实现分页
參考網(wǎng)上的資源(必優(yōu)博客 http://www.biuuu.com/)
注意：CSS樣式使分頁(yè)導(dǎo)航水平顯示，如果沒(méi)有的話(huà)將以普通列表方式呈現(xiàn)。
<html>
<head>
<script type="text/javascript" src="Library/jquery1.3.1/dist/jquery.js"></script>
<script type="text/javascript" src="Library/jquery1.3.1/jquery.pager.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() { $("#pager").pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick }); }); PageClick = function(pageclickednumber) { $("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick }); $("#result").html("測(cè)試jQuery分頁(yè)器 當(dāng)前第" + pageclickednumber + "頁(yè)"); }
</script>
<style type="text/css">
<!--
#pager ul.pages { display:block; border:none; text-transform:uppercase; font-size:10px; margin:10px 0 50px; padding:0; }
#pager ul.pages li { list-style:none; float:left; border:1px solid #ccc; text-decoration:none; margin:0 5px 0 0; padding:5px; }
#pager ul.pages li:hover { border:1px solid #003f7e; }
#pager ul.pages li.pgEmpty { border:1px solid #eee; color:#eee; }
#pager ul.pages li.pgCurrent { border:1px solid #003f7e; color:#000; font-weight:700; background-color:#eee; }
-->
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
? <h1 id="result">測(cè)試jQuery分頁(yè)器 </h1> <div id="pager" ></div>
</form>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/GarfieldTom/archive/2009/06/11/1501084.html
總結(jié)
以上是生活随笔為你收集整理的jQuery实现分页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 消费者投诉白象方便面面饼里有蚂蚁让人看吐
- 下一篇： foriegn web site