2017-02-10 30 views
1

我已经加入分页为JSON数据表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); 
        } 
       }); 

}); 

回答

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 
}); 

演示:https://jsfiddle.net/py9rvfcp/4/

+0

分页不工作.......我希望增加对数字也 – user7397787

+0

,这不是你的问题 – madalinivascu

+0

我有一个疑问,在我的表,现在我访问第二页now.When我点击这些列表进行分页下一个按钮,它应该从第二页,第三页向右移动?但数字按键被单独工作,一个和下一个按钮都工作separately.Can请你帮我做这件事?更新代码https://jsfiddle.net/c354jnxm/ – user7397787