超简单的jquery版的分页一看就会

分页

演示在最后

1. 首先怎么实现数据的分页
2. 确定每一页的数据量就行了，是不是超简单
3. 比如我们本地的所有的数据一共有40条
4. 所以每一页定的数据量是10条，一共就有4页
5. 

$(".ind").click(function () {
    $(".fnmid").children().css({
        "display": "none"
    })
    var num = 10;
    var tex = $(this).text()
    for (var j = (tex - 1) * num; j < num * tex; j++) {
        renderdatatwo(dataAdmin[j], j)
    }
})

6. 我们来确定一个公式，num定义的是10因为第一次页面自动渲染的数据是1-10条的数据
7. var tex = $(this).text()是当前点击的页面，比如我点击第一页那这个元素的text()就是1
8. for (var j = (tex - 1) * num; j < num * tex; j++)这就是循环公式，j小于的就是当前页数乘以10
9. renderdatatwo(dataAdmin[j], j)循环调用这个函数，因为这个是页面渲染数据方法，传入dataAdmin[j]是本地数据里面的每一项j也就是j = (tex - 1) * num是控制页面渲染数据里面的循环渲染多少条到多少条数据
10. 然后给所有的页面进行添加点击事件，进行触发该循环，传入数据给页面渲染函数

—页面渲染数据函数方法

// 页面数据渲染
function renderdatatwo(config, j) {
    var one1 = $(".templateul2").eq(0).clone(true).removeClass("templateul2");
    one1.css({
        "display": "block"
    })
    var num = 1
    for (j in config) {
        one1.children().eq(num).html(config[j])
        one1.children().eq(0).html(
            `
                    <input type="checkbox" class="chk">
                    `
        )
        one1.children().eq(9).html(
            `
                    <span class="sp1">修改</span>
                    <span class="sp2">删除</span>
                    `
        )
        $(".fnmid").append(one1)
        num++
    }
}
for (let i = 0; i < 10; i++) {
    renderdatatwo(dataAdmin[i])
}

11. 上面传入的j在这里接收也用j进行接收
12. 每点击一次传入的j数据都不同然后进行渲染不同的数据
13. 但是渲染前都会进行之前的数据隐藏或者删除$(".fnmid").children().css({"display": "none" })
14. 渲染数据的函数另一个接收的参数是本地的数据
15. 用for in循环进行渲染数据，都是用的jquery方法

演示

标签：jquery,分页,渲染,一看,tex,num,var,数据,页面
来源： https://blog.csdn.net/weixin_45568677/article/details/117200344