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

上一个和下一个按钮之间的文本框导航到表格中

1 个答案: