我为json数据表添加了分页。
如何在之前的下一个按钮之间添加1 2 3以进行分页
完整代码https://jsfiddle.net/py9rvfcp/
$(document).ready(function(){
var table = $('#myTable');
var max_size=userDetails.length;
var sta = 0;
var elements_per_page = 3;
var limit = elements_per_page;
goFun(sta,limit);
function goFun(sta,limit){
for(var i=sta;i<limit;i++){
var tab='<tr><td>'+userDetails[i].Username+"\n"+'</td><td>'+userDetails[i].Firstname+"\n"+'</td><td>'+userDetails[i].Lastname+"\n"+'</td><td>'
+userDetails[i].Email+"\n"+'</td><td>'+userDetails[i].Address+"\n"+'</td><td>'+userDetails[i].Mobilenumber+"\n"+'</td><td>'
+userDetails[i].Age+"\n"+'</td><td>'+userDetails[i].Gender+"\n"+'</td></tr>';
$('#myTable').append(tab)
}
}
$('#nextValue').click(function(){
var next = limit;
if(max_size>=next) {
limit = limit+elements_per_page;
table.empty();
goFun(next,limit);
}
});
$('#PreValue').click(function(){
var pre = limit-(2*elements_per_page);
if(pre>=0) {
limit = limit-elements_per_page;
table.empty();
goFun(pre,limit);
}
});
});
答案 0 :(得分:1)
执行以下操作:
按如下方式更改您的html:
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="col-lg-2 col-md-2 col-xs-4">
<button class="col-lg-12 col-xs-12 bgColor" id="PreValue">Pre</button>
</div>
<div class="col-lg-2 col-md-2 col-xs-4 nav">
</div>
<div class="col-lg-2 col-md-2 col-xs-4">
<button class="col-lg-12 col-xs-12 bgColor" id="nextValue">Next</button>
</div>
</div>
JS:
var number = Math.round(userDetails.length / elements_per_page);//get total page number
for(i=0;i<=number;i++) {
$('.nav').append('<button class="btn">'+i+'</button>');//append a button for each page
}
$('.nav button').click(function(){//bind a click event
var start = $(this).text();//get the current page
table.empty();//empty the table
limit = 3*(parseInt(start)+1) > max_size ? max_size: 3*(parseInt(start)+1);//set the limit to max size if the limit is bigger then the max size
goFun(start*3,limit); //populate the table
});