分页功能制作

简介: 分页功能制作

js实现简单分页功能

let data;
$.ajax({
    type: "POST",
    url: "接口数据",
    data: {},
    success: function(res) {
        console.log(res);
fun(res)
data = res
    }
})

声明两个变量

let k = 0;  
//当前页
let num = 10;
//每页10条数据

for循环

function fun(res) {
for (let i = k * num; i < (k + 1) * num; i++) {
//数据渲染 字符串拼接
}
}
var nums = Math.ceil(res.data.info.length / num);
//声明当前总共多少页面
//然后循环拼接button按钮
for (let i = 0; i < nums; i++){
if (k == i) {
            strss += '<button class="btns" onclick="jump(' + i + ')" style="background-color:yellow;"> ' + (i + 1) +
                ' </button>';
        }
}
function jump(l) {
    k = l;
    fun(data);
}
相关文章
|
6天前
|
小程序 索引 容器
微信小游戏制作工具中的滚动列表插件如何使用?
微信小游戏制作工具中的滚动列表插件如何使用?
72 1
|
7月前
|
SQL 前端开发 Java
通用分页-后台
通用分页-后台
73 0
|
6天前
|
JSON JavaScript 数据格式
分页功能制作
分页功能制作
|
6天前
|
前端开发 JavaScript
vue实现通用分页控件,支持前端分页、后端分页。
vue实现通用分页控件,支持前端分页、后端分页。
41 1
|
9月前
极简分页功能制作
极简分页功能制作
|
存储 前端开发 JavaScript
|
前端开发 JavaScript Java
|
JSON 监控 前端开发
小程序滚动加载分页处理(新详细教程)
成品展示: 下滑可以获取刷新后的新数据结合旧数据渲染前端,从而实现分页功能 关注、收藏、点赞3连😀!!! 关注、收藏、点赞3连😀!!! # 一、所使用到方法及后端函数的介绍 1.小程序涉及到的方法介绍 看下微信文档说明: 监听用户滑到底部操作: onReachBottom:funtion(){ } 思路:在里面写数据调用,对每次滑到底部进行分页起始和分页结束变量累加即可 第二个就是 concat 用法:将旧数据与新数据拼接 1.TP5后端查询方法 limit(起始页,终止页) 二、完整代
282 0
小程序滚动加载分页处理(新详细教程)