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);
}
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>
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!