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

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

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

---

之前：

后：

---

这是我正在处理的代码片段

$(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 = `${text}`; $("#tblText tbody").append(markup); $('#myInput').val(''); //Check if it is a multiple of 5? paginateTable(); } } }); function paginateTable() { $('#paginationDiv').html('
'); 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(`
${pageNum}
`); } $('#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); }); } }); 

---

这是我的解决方案的小提琴 。

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

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 = `${text}`; $( "#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( '
' ); 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( `
${pageNum}
`); } $( '#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'); }