jQuery分页插件演示大全

最新推荐文章于 2024-08-22 15:47:42 发布

原创最新推荐文章于 2024-08-22 15:47:42 发布 · 534 阅读

1 ·

CC 4.0 BY-SA版权

本文展示了一个基于jQuery的分页插件应用实例，通过不同的样式配置实现了多种风格的分页导航栏。每种样式均设置了当前页为1，总页数为100，每页显示5条记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
 
 <
 link 
 rel
 =
 "stylesheet" 
 href
 =
 "http://www.ostools.net/uploads/jquery/pagination/myPagination.css"
 />
 
 <
 style
 >
 
     
 .h5{font-weight:bold;text-align:center;margin:10px 0;}
 
 </
 style
 >
 
 <
 script 
 type
 =
 "text/javascript" 
 src
 =
 "http://www.ostools.net/js/jquery/jquery-1.7.2.js"
 ></
 script
 >
 
 <
 script 
 type
 =
 "text/javascript" 
 src
 =
 "http://www.ostools.net/uploads/jquery/pagination/jquery.myPagination.js"
 ></
 script
 >
 
 <
 script 
 type
 =
 "text/javascript"
 >
 
 $(function() {
 
         
 $("#demo1").myPagination({
 
           
 currPage: 1,
 
           
 pageCount: 100,
 
           
 pageSize: 5,
 
         
 });
 
         
 $("#demo2").myPagination({
 
           
 currPage: 1,
 
           
 pageCount: 100,
 
           
 pageSize: 5,
 
           
 cssStyle:'yahoo'
 
         
 });
 
         
 $("#demo3").myPagination({
 
           
 currPage: 1,
 
           
 pageCount: 100,
 
           
 pageSize: 5,
 
           
 cssStyle:'digg'
 
         
 });
 
         
 $("#demo4").myPagination({
 
           
 currPage: 1,
 
           
 pageCount: 100,
 
           
 pageSize: 5,
 
           
 cssStyle:'meneame'
 
         
 });
 
         
 $("#demo5").myPagination({
 
           
 currPage: 1,
 
           
 pageCount: 100,
 
           
 pageSize: 5,
 
           
 cssStyle:'flickr'
 
         
 });
 
         
 $("#demo6").myPagination({
 
           
 currPage: 1,
 
           
 pageCount: 100,
 
           
 pageSize: 5,
 
           
 cssStyle:'sabrosus'
 
         
 });
 
         
 $("#demo7").myPagination({
 
           
 currPage: 1,
 
           
 pageCount: 100,
 
           
 pageSize: 5,
 
           
 cssStyle:'scott'
 
         
 });
 
         
 $("#demo8").myPagination({
 
           
 currPage: 1,
 
           
 pageCount: 100,
 
           
 pageSize: 5,
 
           
 cssStyle:'quotes'
 
         
 });
 
         
 $("#demo9").myPagination({
 
           
 currPage: 1,
 
           
 pageCount: 100,
 
           
 pageSize: 5,
 
           
 cssStyle:'black'
 
         
 });
 
 });
 
 </
 script
 >
 
 <
 div 
 class
 =
 "h5"
 >默认样式</
 div
 >
 
 <
 div 
 id
 =
 "demo1"
 ></
 div
 >
 
 <
 div 
 class
 =
 "h5"
 >yahoo样式</
 div
 >
 
 <
 div 
 id
 =
 "demo2"
 ></
 div
 >
 
 <
 div 
 class
 =
 "h5"
 >digg样式</
 div
 >
 
 <
 div 
 id
 =
 "demo3"
 ></
 div
 >
 
 <
 div 
 class
 =
 "h5"
 >meneame样式</
 div
 >
 
 <
 div 
 id
 =
 "demo4"
 ></
 div
 >
 
 <
 div 
 class
 =
 "h5"
 >flickr样式</
 div
 >
 
 <
 div 
 id
 =
 "demo5"
 ></
 div
 >
 
 <
 div 
 class
 =
 "h5"
 >sabrosus样式</
 div
 >
 
 <
 div 
 id
 =
 "demo6"
 ></
 div
 >
 
 <
 div 
 class
 =
 "h5"
 >scott样式</
 div
 >
 
 <
 div 
 id
 =
 "demo7"
 ></
 div
 >
 
 <
 div 
 class
 =
 "h5"
 >quotes样式</
 div
 >
 
 <
 div 
 id
 =
 "demo8"
 ></
 div
 >
 
 <
 div 
 class
 =
 "h5"
 >black样式</
 div
 >
 
 <
 div 
 id
 =
 "demo9"
 ></
 div
 >