jquery 插件QuickPaginate快速分页-程序员宅基地

技术标签： css tdd function generator jquery xhtml

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

本文链接：https://blog.csdn.net/wpfuru/article/details/7602781

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

微信公众号{"errcode":40164,"errmsg":"invalid ip 113.70.100.150, not in whitelist hint: [i50PvA0089sha6]"}-程序员宅基地

获取access_token时却报出下列错误信息：{"errcode":40164,"errmsg":"invalid ip 113.70.100.150, not in whitelist hint: [i50PvA0089sha6]"}解析：从字面上解读错误就是ip地址不在whitelist（白名单中），只要添加ip进白名单即可。错误：{ "errcode": 85005, "errm...

【平台设备驱动】中module_platform_driver的定义和使用-程序员宅基地

该函数实际是一个宏，它在include/linux/platform_device.h中定义如下：[cpp] view plain copy /* module_platform_driver() - Helper macro for drivers that don't do * anything special in module

php fpm 用户用户组,如何将php-fpm的用户设置为php-user而不是www-data？_Victor胜利的微笑的博客-程序员宅基地

我正在使用Nginx在Debian上使用php-fpm以获得php5支持。我希望php-fpm位于user＆group php-user之下，而不是www-data下。我以为init.d脚本会提到用户或使用其中写入了www-data的文件。但是我看不到。我如何在用户php-user：php-user下生成此过程？这是我服务器上的php5-fpm init.d脚本。我尝试查看start-stop-d..._php.ini fpm-user

网络安全入门 8.1 漏洞专题--SQL注入_mysql8.0.1漏洞-程序员宅基地

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190419103033746.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE3NjE1Mw==,size_16,color_..._mysql8.0.1漏洞

android学习笔记之六广播(BroadcastReceiver)-程序员宅基地

用于接收外部事件(注意BroadcastReceiver是用时创建用完后即摧毁的) 1,获取 a,注册 Context.registerReceiver (BroadcastReceiver receiver, IntentFilter filter) receiver 为获取BroadcastReceiver事件的类 filter 事件过滤器为sendBroadcast...

【Python】读CSV和狗血的分隔符问题，附解决方法！_风度78的博客-程序员宅基地

今天跟大家分享一个遇到的挺狗血的问题，读入csv文件关于分隔符的问题。1使用pandas读入csv文件后，发现列没分割开，所以将sep参数调整为\t，发现还是没分割开，再试空格，再试\s+..._python写csv文件分隔符问题

随便推点

前端js优化方案（二）持续更新_前端js代码优化-程序员宅基地

由于上篇篇幅过长，导致编辑出了问题，另开一篇文章继续：（4）减少迭代次数，最广为人知的一种限制循环迭代次数的模式被称为“达夫设备（Duff`s Device）” Duff`s Device的理念是：每次循环最多可以调用8次process()。循环的迭代次数为总数除以8，由于不是所有数字都能被8整除，变量startAt用来存放余数，表示第一次循环应该循环_前端js代码优化

java gui中文变方块_150道Java面试基础题（含答案）-程序员宅基地

1）Java 中能创建 volatile 数组吗？能，Java 中可以创建 volatile 类型数组，不过只是一个指向数组的引用，而不是整个数组。我的意思是，如果改变引用指向的数组，将会受到 volatile 的保护，但是如果多个线程同时改变数组的元素，volatile 标示符就不能起到之前的保护作用了。2）volatile 能使得一个非原子操作变成原子操作吗？一个典型的例子是在类中有一个 lo...

搭建YAPI接口管理平台_y 接口管理_杰森斯坦森1150的博客-程序员宅基地

一、引言：YApi 是高效、易用、功能强大的API管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务官网：https://yapi.ymfe.org/因公司日常开发中需要管理接口，并测试，经对比后发现YAPI更合适。YAPI可以建立独立的项目空间，适配环境，mock参数。适用于前后端分离场景下的接口管理和测试。API接口在设计时往往需要编写大量的文档，而且编写完成后往往需要根据实际情况经常改动文档，这使得文档编写维护工作量相对较大，让很多的开发者都很头疼。此外，伴随着接口版本的迭代开发，接_y 接口管理