翻页组件由原生js开发，可以直接在项目中引入。
使用方法：
-
引入js文件、样式文件
...... <link href="./common.css" rel="stylesheet"> <script src="./pagePlugin.js"></script> ...... -
添加div
<div class="page-plugin" id="pagePlugin"></div> -
实例化分页插件
// 回调函数，页码改变时触发回调事件，用户可以在该回调内处理自己的业务逻辑 var pageChange = data => { const { pageNum, pageSize } = data console.log(`新的页码${pageNum}新的分页大小${pageSize}`) // 处理你的分页逻辑（更新数据） } var homePagePlugin = new PagePlugin('pagePlugin',pageChange)
-
更新分页插件数据
在获取数据后，需要及时给插件设置数据，以便插件能够正确的显示页码，设置方法如下：
// 调用实例化对象的setPage方法更新组件数据 // pageNum {Number}: 当前页码 // pageSize {Number}：当前每个页的数据条数 // total {Number}：总的数据条数 homePagePlugin.setPage(pageNum, pageSize, total) 完整代码
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<link href="./common.css" rel="stylesheet">
<script src="./pagePlugin.js"></script>
<title>分页插件使用方法</title>
</head>
<body>
<div class="page-plugin" id="pagePlugin"></div>
<script>
// 回调函数，页码改变时触发回调事件，用户可以在该回调内处理自己的业务逻辑
var pageChange = data => {
const { pageNum, pageSize } = data
console.log(`新的页码${pageNum}新的分页大小${pageSize}`)
// 处理你的分页逻辑（更新数据）
}
var homePagePlugin = new PagePlugin('pagePlugin',pageChange)
setTimeout(()=>{
// 第5页，每页10条数据，共113条数据
homePagePlugin.setPage(5, 10, 113)
}, 1000 * 3)
</script>
</body>
</html>
-
示例
示例.gif
