上一個和下一個按鈕之間的文本框導航到表

以下代碼是爲表分頁它工作正常。我懷疑是當我想要直接移動第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); 
        } 
       }); 


});

來源

2017-02-13 user7397787

你通常需要一個按鈕動作跳轉到頁面，而比「在文本框中輸入10」 - 需要觸發器，如果用戶想輸入「100」，該怎麼辦？你可以做onblur，但用戶習慣於輸入一個值並點擊一下。所以添加一個跳轉到按鈕並觸發。否則，目前還不清楚問題是什麼，因爲你提供了你現在擁有的東西，只是一個「願望清單」。 –

@ freedomn -m好的。我可以正確使用按鈕嗎？如果我有20頁，意味着我可以只顯示4個按鈕，當我點擊下一個時，我可以顯示其餘所有按鈕的權利？ – user7397787

擴展您最初的建議：以前BTN] [頁面輸入] [跳轉到頁面BTN] [下一頁BTN]，所以例如HTML：'已' –

通過添加以下代碼我得到了預期的答案
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); 
        } 
       });

來源

2017-02-13 16:42:14 user7397787

@ freedomn-m感謝給予的想法。 – user7397787

上一個和下一個按鈕之間的文本框導航到表

回答

相關問題