您的位置：首页 > Web前端 > JQuery

jquery 插件QuickPaginate快速分页

2012-05-25 17:44 411 查看
使用说明

一，需要jQuery库文件和QuickPaginate库文件

二，可自定义分页CSS显示效果，如：qp_prev和qp_next

<!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" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Editplus4PHP" />
<meta name="keywords" content="Leo, HentStudio, Editplus4PHP, LeoPHP" />
<meta name="description" content="LeoPHP - Powered by HentStduio" />
<meta name="author" content="Leo" />
<link rel="shortcut icon" href="images/favicon.ico" />
<title>Example | xHTML1.0</title>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.quickpaginate.packed.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="js/jquery.quickpaginate.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript" charset="utf-8">
$(function(){
$("#new_list tr").quickpaginate({ perpage: 2,  pager : $("#new_counter") });
});
</script>

</head>
<body>

<div style="display:block;">
<table border="1"><!--table 开始-->
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody id="new_list">
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td>D5</td>
</tr>
</tbody>
</table>
<div id="new_counter"></div>
</div>
<hr /><hr />
<script type="text/javascript">
<!--
$(function(){
$("#images img").quickpaginate({ perpage: 1, showcounter: true, pager : $("#images_counter") });
});
//-->
</script>
<div id="images">
<img src="images/demo1.gif" width="200" height="133" alt="Demo1" />
<img src="images/demo2.jpg" width="200" height="133" alt="Demo2" />
<img src="images/demo3.gif" width="200" height="133" alt="Demo3" />
</div>

<div id="images_counter"></div>
</body>
</html>




jQuery插件QuickPaginate参数详解

perpage表示每页显示数，默认值为6，如上文本实例每页显示2个

pager表示QuickPaginate生成分页HTML代码显示的对象，默认为null，如上：$("#new_list")

showcounter表示是否显示统计，默认为true

prev表示上一页CSS样式名，默认为qp_next，具体请看QuickPaginate生成的代码图

next表示下一页CSS样式名，默认为qp_prev

pagenumber表示当前页CSS样式名，默认为qp_pagenumber

totalnumber表示总页数CSS样式名，默认为qp_totalnumber

counter表示统计CSS样式名，默认为qp_counter

jquery quickpaginate分页demo
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航