带有 json 数据的表格分页

Question

我已经为 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/