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

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

我面临的问题是，每当我从输入文本框加载文本时 应该转到表的特定视图。但是当我添加文本时 默认情况下，它将出现在第一个视图中。（见截图） （见下文）

---

之前：

之后：

---

下面是我正在编写的代码片段

$（函数（）{
$（“#myInput”）.keyup（函数（事件）{
//回车时，将文本追加到表中
如果（event.keyCode===13）{
让text=$（'#myInput'）.val（）；
如果（文本！=“”）{
让标记=`${text}`；
$（“#tblText tbody”）。附加（标记）；
$（'#myInput'）.val（''）；
//检查它是否是5的倍数？
分页表（）；
}
}
});
函数分页表（）{
$（'#paginationDiv'）.html（'
）；
让rowsShown=5；
设totalRows=$（'#tblText tbody tr'）。长度；
设numPages=totalRows/rowsShown；
for（设i=0；i`）；
}
$（'tblText tbody tr'）.hide（）；
$（'#tblText tbody tr'）.slice（0，rowsShown.show（）；
$（'#pagedText a:first'）.addClass（'active'）；
$（文档）.on（'click'，'.pagedLink'，函数（e）{
调试器；
$（'.pagedLink'）.removeClass（'active'）；
$（this.addClass（'active'）；
让currentPage=parseInt（$（this.attr（'rel'））；
让startItem=currentPage*rowsShown；
让endItem=startItem+rowsShown；
$（'tblText tbody tr'）.css（'opacity'，'0.0'）.hide（）.slice（startItem，endItem）.css（'display'，'table row'）.animate({
不透明度：1
}, 300);
});
}
});
在paginateTable（）的调用在promise中解析后，使用promise来解析调用。然后（）触发器单击分页的最后一页以显示最新项目：

$(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');
}

$（函数（）{
$（“#myInput”）.keyup（函数（事件）
{
//回车时，将语句附加到表中
如果（event.keyCode===13）
{
让text=$（'#myInput'）.val（）；
如果（文本！=“”）
{
让标记=`${text}`；
$（“#tblText tbody”）。附加（标记）；
$（'#myInput'）.val（''）；
//检查它是否是5的倍数？
//创建promise对象以解析paginateTable（）和promise的.then（）以触发分页中最后一页的click事件
var promiseToNewPage=新承诺（函数（解析、拒绝）{
解析（分页表（））；
});
promiseToNewPage.then（函数（）{
DisplayNewestPage（）；
});
}
}
});
函数分页表（）
{
$（'#paginationDiv'）.html（'
）；
让rowsShown=5；
设totalRows=$（'#tblText tbody tr'）。长度；
设numPages=totalRows/rowsShown；
for（设i=0；i`）；
}
$（'tblText tbody tr'）.hide（）；
$（'#tblText tbody tr'）.slice（0，rowsShown.show（）；
$（'#pagedText a:first'）.addClass（'active'）；
$（文档）.on（'click'，'.pagedLink'，函数（e）
{
调试器；
$（'.pagedLink'）.removeClass（'active'）；
$（this.addClass（'active'）；
让currentPage=parseInt（$（this.attr（'rel'））；
让startItem=currentPage*rowsShown；
让endItem=startItem+rowsShown；
$（'tblText tbody tr'）.css（'opacity'，'0.0'）.hide（）.slice（startItem，endItem）.css（'display'，'table row'）.animate（{opacity:1}，300）；
});
}
});
//触发器单击最后一页链接类项目
函数DisplayNewestPage（）{
$（'.pagedLink'）.last（）.trigger（'click'）；
}
我认为一切正常，您在列表末尾添加了一个新项目，因此它将成为分页表视图第2页的第一个元素。如果您希望刚刚添加的项出现在表视图中，则需要将该项添加到列表中，或者如果该项是第2页的一部分，请使表视图重新呈现第2页而不是第1页，或者增加页面中可查看项的数量。@RyanWilson我希望在进入第6行时自动呈现第2页，但回到第1页，进入第6行。我想你的问题是你在这里的划分：让numPages=totalRows/rowsShown；因为您有6行/5行显示您得到了1，所以使用模数运算符查看是否有余数，如果有，则将1添加到numPages。在下面发布答案来说明我的意思。@RyanWilson但这是如何呈现第二页的？@一旦你知道你需要第1页或第2页来呈现，就在该页码上触发一个点击事件。但除非我手动点击第2页对应的链接，否则它不会自动发送到第二页。你能解释一下为什么会出现“promisified”吗在您的答案中，解决方案的工作细节是什么？@KunalMukherjee我在上面的代码中添加了一条注释来解释发生了什么。promise对象.then（）在paginateTable（）解析后触发，并调用函数DisplayNewestPage（）。这里有一个链接可以更深入地解释Promise（），这是一个非常聪明的解决方案
//触发器单击last pagedLink类项函数DisplayNewestPage（）{$（'.pagedLink'）.last（）.trigger（'click'）；}
和
promiseToNewPage.then（function（）{DisplayNewestPage（）；}）