标签：tab 操作 trap sheet char asc list 技术 link
导入1个css文件和2个js文件，后面再导jqPaginator.css
在页面创建p标签id为info
创建ul标签，类名必须叫pagination用于指定样式，id为page
编写js代码，使用插件。$(ul对象).jqPaginator({});
设置totalCounts为100，表示一共有100条记录
pageSize页面大小，每页显示3条记录
currentPage当前是第几页，默认设置为第1页
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--> <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>
标签：tab 操作 trap sheet char asc list 技术 link
原文地址：https://www.cnblogs.com/yblue/p/13694650.html
