我正在尝试构建一个应用程序，用户可以在其中从文本框中输入文本，文本将附加到动态生成的表格中。该表还将有 Bootstrap Pagination ，我只想在每个表格 View 中显示 5 个表格行。
The problem I'm facing is, whenever I load text from input textbox it should go to the particular view of table. But when I am adding text from textbox its coming in the first view by default. (See screenshot below)
之前:
之后:
这是我正在处理的代码片段
$(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);
});
}
});<!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>这是 fiddle到我的解决方案。
任何帮助将不胜感激，谢谢。
最佳答案
在 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');
}
关于javascript - 向表格动态添加文本时无法显示分页表格 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49155671/