前のテキストボックスと次のボタンの間にあるテキストボックス

Question

次のコードはテーブルのページ付けのためのものです。私は次のボタンをクリックしたくないときは10番目のレコードを直接移動したいと思っています。私がテキストボックスに10を入力するとテキストボックスを追加しました。それは10ページ目を表示します。最後と最初のボタンのように、テーブルの最後と最初のページを表示する必要があります。
https://jsfiddle.net/6aqytrkw/
できますか？私は予想しまった次のコードを追加することにより

$(document).ready(function(){ 
       var table = $('#myTable'); 
       var max_size=userDetails.length; 
       var sta = 0; 
       var j=1; 
       var elements_per_page = 3; 
       var limit = elements_per_page; 
       $('.paginationList').append('<input type="text" class="btn col-lg-12 col-md-12 col-xs-12">'); 
       $('.paginationList input').val(1); 
       pagination(sta,limit); 

       function pagination(sta,limit){ 
       console.log(sta,limit); 
        for(var i=sta;i<limit;i++){ 
        var tab='<tr id="row'+i+'"><td>'+userDetails[i].Sno+"\n"+'</td><td>'+userDetails[i].empId+"\n"+'</td><td>'+userDetails[i].Firstname+"\n"+'</td><td>'+userDetails[i].email+"\n"+'</td><td>' 
           +userDetails[i].phone+"\n"+'</td><td>'+userDetails[i].designation+"\n"+'</td><td>'+userDetails[i].projectAllocated+"\n"+'</td><td><button class="btn btn-info btn-xs edit" data-toggle="modal" data-target="#myModal" data-html="true">'+ 
           userDetails[i].edit +'</button><button class="btn btn-warning btn-xs dlt">'+userDetails[i].remove +'</button></td></tr>'; 

        $('#myTable').append(tab) 
       } 
       } 
       $('#nextValue').click(function(){ 
        var next = limit; 
        if(max_size>=next) { 
        j= eval(j+1); 
        def = limit+elements_per_page; 
        limit = def 
        table.empty(); 
        if(limit > max_size) { 
        def = max_size; 
        } 
        $('.paginationList input').val(j); 
         pagination(next,def); 
        } 
       }); 
        $('#PreValue').click(function(){ 
        var pre = limit-(2*elements_per_page); 
        if(pre>=0) { 
        j = eval(j-1); 
        limit = limit-elements_per_page; 
        table.empty(); 
        $('.paginationList input').val(j); 
        pagination(pre,limit); 
        } 
       }); 


}); 

Answer 1

答え
HTML：

<div class="col-lg-6 col-md-6 col-xs-12"> 

     <div class="col-lg-1 col-md-2 col-xs-12 padding pull-right"> 
     <button class="col-lg-11 col-xs-12 bgColor" id="nextValue">Next</button> 
     </div> 
     <div class="col-lg-1 col-md-2 col-xs-12 padding pull-right"> 
     <button class="col-lg-11 col-xs-12 bgColor" id="go">Go</button> 
     </div> 
     <div class="col-lg-1 col-md-2 col-xs-12 paginationList padding pull-right"> 
     </div> 
     <div class="col-lg-1 col-md-2 col-xs-12 padding pull-right"> 
     <button class="col-lg-11 col-xs-12 bgColor" id="PreValue">Pre</button> 
     </div> 

    </div> 

スクリプト：

$('#go').click(function(){ 
        var displayPage=$('#pageNo').val(); 
        j=displayPage; 
        var ending_row=displayPage*elements_per_page; 
        var starting_row=ending_row-elements_per_page; 
        table.empty(); 
        { 
        $('.paginationList input').val(j); 
         pagination(starting_row,ending_row); 
        } 
       });