js datas数组怎么写分页代码

Question

datas是数组，这个数组箱弄成分页的，10个分一页，不知道怎么写这个分页代码，有哪位可以帮忙写一下吗?先谢谢了。
还有按照大小排序。

<div class="small-x12 middle-x12 big-x10">
    <div class="grid" id="workers">
        <div class="loader"><i></i></div>
    </div>
    <div class="align-center padding-top">
        <ul class="nav nav-page">
            <li class="bg-white"><a href="javascript:;">上一页</a></li>
            <li class="bg-white">
            <select>
                <option value="">1</option>
                <option value="">2</option>
            </select>
            </li>
            <li class="bg-white"><a href="javascript:;">下一页</a></li>
        </ul>
    </div>
</div>

for(var i=0;i<result.length;i++){
    var datas=result[i];
    loadWorker(datas);
}

function yinKa(obj){
            var datas='<div class="small-x6 middle-x4 big-x3>'+
                '<p>ID：'+obj.tokenId+' <span class="fr">值：<b class="text-danger">'+obj.power+'</b></span></p><hr/>'+
            '</div>';
            $("#workers").append(datas);
        }

Answer 1

result吧。。datas是数组项，用一个变量记录住当前页，然后点击上一页--，下一页++，需要计算下总页数，示例代码如下

<div class="small-x12 middle-x12 big-x10">
    <div class="grid" id="workers">
        <div class="loader"><i></i></div>
    </div>
    <div class="align-center padding-top">
        <ul class="nav nav-page">
            <li class="bg-white"><a href="javascript:;" onclick="loadPage(-1)">上一页</a></li>
            <li class="bg-white">
                <select id="pages">
                    <option value="">1</option>
                    <option value="">2</option>
                </select>
            </li>
            <li class="bg-white"><a href="javascript:;" onclick="loadPage(1)">下一页</a></li>
        </ul>
    </div>
</div>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    //数据模拟
    var result = [];
    for (var i = 1; i <= 23; i++) {
        result.push({ tokenId:'tokenId'+i,power:'power'+i});
    }
    //结束

    var pageSize = 10;//每页显示的记录数
    var totalRecord = result.length;
    var totalPage = Math.floor(totalRecord / pageSize) + (totalRecord % pageSize == 0 ? 0 : 1);//总页数

    //更新select可选页数
    var s = '';
    for (var i = 1; i <= totalPage; i++)s += `<option value="${i}">${i}</option>`
    $('#pages').html(s).change(function () {
        currentPage = parseInt(this.value);
        GetPageHtml();
    });


    var currentPage = 1;
    function GetPageHtml() {
        $("#workers").html('');//清空原来的数据
        for (var i = (currentPage-1) * pageSize, j = Math.min(currentPage * pageSize, totalRecord); i < j; i++) {
            var datas = result[i];
            yinKa(datas);
        }
        $('#pages').val(currentPage);//更新下拉框当前加载的页码
    }
    function loadPage(dir) {
        if (dir == -1 && currentPage == 1) {
            if (currentPage == 1) { alert('已经是第一页！'); return }
        }
        if (dir == 1 && currentPage == totalPage) { alert('已经是最一页！'); return }
        
        currentPage += dir;
        GetPageHtml();
    }
    function yinKa(obj) {
        var datas = '<div class="small-x6 middle-x4 big-x3">' +//这里属性少了个双引号
            '<p>ID：' + obj.tokenId + ' <span class="fr">值：<b class="text-danger">' + obj.power + '</b></span></p><hr/>' +
            '</div>';
        $("#workers").append(datas);
    }

    GetPageHtml();
</script>