表分頁與

Question

我已經加入分頁爲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); 
        } 
       }); 

}); 

Answer 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/