分页插件jqPaginator的使用

步骤

（注意每个参数都不能出错，多一个字母啥的就不起效果，本人刚接触就深受其害）

  1. 导入1个css文件和2个js文件，后面再导jqPaginator.css

  2. 在页面创建p标签id为info

  3. 创建ul标签，类名必须叫pagination用于指定样式，id为page

  4. 编写js代码，使用插件。$(ul对象).jqPaginator({});

    1. 设置totalCounts为100，表示一共有100条记录

    2. pageSize页面大小，每页显示3条记录

    3. currentPage当前是第几页，默认设置为第1页

    4. onPageChange是点击每个页码激活的事件，有两个参数：num表示点了第几页，type表示激活的类型，取值是"init"和"change"。在info中显示当前激活类型和第几页

参数

参数默认值说明
totalCounts 0 设置分页的总条目数
pageSize 0 设置每一页的条目数 注意：要么设置totalPages，要么设置totalCounts + pageSize，否则报错；设置了totalCounts和pageSize后，会自动计算出totalPages。
currentPage 1 设置当前的页码
onPageChange (无) 回调函数，当换页时触发（包括初始化第一页的时候），会传入两个参数： 1、“目标页"的页码，Number类型 2、触发类型，可能的值：“init”（初始化），“change”（点击分页）

结构

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页插件的使用</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jqPaginator.css">
    <!--先导入jquery.js  注意css和js文件的导入顺序，jqPaginator的css文件（依赖bootstrap框架）和js文（依赖jquery框架）件都必须在后面-->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jqPaginator.js"></script>
</head>
<body>
<!--
    1.分页插件的容器必须是ul
    2.必须指定类名为：pagination
    3.在js代码中调用函数: ul对象.jqPaginator({参数})
-->
<ul class="pagination"></ul>

<script type="text/javascript">
    $("ul.pagination").jqPaginator({
        //总记录数
        totalCounts: 30,
        //每页大小
        pageSize: 3,
        //当前第几页
        currentPage: 1,
        /*
        一开始加载分页插件就会激活这个函数，以后点击任何一个页面按钮也会激活这个事件
        有两个参数：
        1. num表示点第几页
        2. type表示操作类型，有两个取值：init表示第1次加载 change表示后面的点击
         */
        onPageChange: function (num, type) {
            alert("第" + num + "页，操作类型：" + type);
        }
    });
</script>
</body>
</html>

 

想看更多精彩内容，可以关注我的CSDN

我的CSDN

posted @ 2020-09-19 09:01  Yblue  阅读(980)  评论(0)  编辑  收藏  举报