之前：

Question

我正在尝试构建一个应用程序，用户可以从文本框中输入文本，文本将附加到动态生成的表中。该表还有Bootstrap Pagination，我只想在每个表视图中显示5个表行。

我遇到的问题是，每当我从输入文本框加载文本时应该去表的特定视图。但是当我添加文字时从文本框中默认进入第一个视图。 （见截图下文）

之前：

后：

这是我正在处理

的代码段

＆＃13;

$(function() {

  $("#myInput").keyup(function(event) {
    //On carriage return append the text to the table
    if (event.keyCode === 13) {
      let text = $('#myInput').val();
      if (text != "") {
        let markup = `<tr><td>${text}</td></tr>`;
        $("#tblText tbody").append(markup);
        $('#myInput').val('');

        //Check if it is a multiple of 5?
        paginateTable();
      }
    }
  });



  function paginateTable() {
    $('#paginationDiv').html('<div class="container"><ul class="pagination pagination-lg" id="pagedText"></ul></div>');
    let rowsShown = 5;
    let totalRows = $('#tblText tbody tr').length;
    let numPages = totalRows / rowsShown;
    for (let i = 0; i < numPages; i++) {
      let pageNum = i + 1;
      $('#pagedText').append(`<li><a href="#" rel="${i}" class="pagedLink">${pageNum}</a></li>`);
    }
    $('#tblText tbody tr').hide();
    $('#tblText tbody tr').slice(0, rowsShown).show();
    $('#pagedText a:first').addClass('active');
    $(document).on('click', '.pagedLink', function(e) {
      debugger;
      $('.pagedLink').removeClass('active');
      $(this).addClass('active');
      let currentPage = parseInt($(this).attr('rel'));
      let startItem = currentPage * rowsShown;
      let endItem = startItem + rowsShown;
      $('#tblText tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).css('display', 'table-row').animate({
        opacity: 1
      }, 300);
    });
  }
});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <input class="form-control input-lg" type="text" id="myInput" placeholder="Enter text" />

  <table id="tblText" class="table table-bordered table-hover table-responsive">
    <tbody>
    </tbody>
  </table>

  <div id="paginationDiv">
  </div>

</body>

</html>

＆＃13;

这是我解决方案的fiddle。

任何帮助将不胜感激，谢谢。

Answer 1

在promise.then（）触发器中解析后，使用promise来解析对paginateTable（）的调用，点击分页的最后一页以显示最新的项目：

$(function(){

 $( "#myInput" ).keyup(function ( event )
  {
        //On carriage return append the utterance to the table
        if ( event.keyCode === 13 )
        {
            let text = $( '#myInput' ).val();
            if ( text != "" )
            {
              let markup = `<tr><td>${text}</td></tr>`;
              $( "#tblText tbody" ).append( markup );
              $( '#myInput' ).val('');

              //Check if it is a multiple of 5?
              //Create promise object to resolve paginateTable() and .then() of promise to trigger click event of last page in pagination
              var promiseToNewPage = new Promise(function(resolve, reject){
                resolve(paginateTable());
              });
              promiseToNewPage.then(function(){
                    DisplayNewestPage();
              });
            }
        }
    });



   function paginateTable()
    {
        $( '#paginationDiv' ).html( '<div class="container"><ul class="pagination pagination-lg" id="pagedText"></ul></div>' );
        let rowsShown = 5;
        let totalRows = $('#tblText tbody tr').length;
        let numPages = totalRows / rowsShown;
        for (let i = 0; i < numPages; i++)
        {
            let pageNum = i + 1;
            $( '#pagedText' ).append( `<li><a href="#" rel="${i}" class="pagedLink">${pageNum}</a></li>`);
        }
        $( '#tblText tbody tr' ).hide();
        $( '#tblText tbody tr' ).slice(0, rowsShown).show();
        $( '#pagedText a:first' ).addClass('active');
        $( document ).on('click', '.pagedLink', function (e)
        {
            debugger;
            $('.pagedLink').removeClass('active');
            $(this).addClass('active');
            let currentPage = parseInt($(this).attr('rel'));
            let startItem = currentPage * rowsShown;
            let endItem = startItem + rowsShown;
            $( '#tblText tbody tr' ).css( 'opacity', '0.0' ).hide().slice( startItem, endItem ).css( 'display', 'table-row').animate({opacity: 1}, 300);
        });
    }
});
//Triggers click on last pagedLink class item
function DisplayNewestPage(){
    $('.pagedLink').last().trigger('click');
}

在向表中动态添加文本时，无法显示分页表视图

之前：

后：

这是我正在处理

1 个答案: