jquery 插件QuickPaginate快速分页

最新推荐文章于 2024-10-28 09:57:35 发布

原创最新推荐文章于 2024-10-28 09:57:35 发布 · 859 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #tdd #xhtml #css #generator #function

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍jQuery插件QuickPaginate的使用方法及参数设置，包括如何实现自定义分页显示效果，适用于网页内容分页展示的需求。

使用说明
一，需要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