let

let

关注
发信
关注(28)粉丝(399)

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

本文介绍了在向表中动态添加文本时，无法显示分页表视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我正在尝试构建一个应用程序，用户可以从文本框中输入文本，文本将附加到动态生成的表中。该表还将有 之后： 这里是我正在处理的代码片段 $（function（）{$ （＃myInput）。keyup（function（event）{//在回车符上将文本附加到表if（event.keyCode === 13）{let text = $（'＃myInput'）。val（） ; if（text！=）{let markup =`< tr>< TD> $ {文本}< / TD>< / TR>`; $（＃tblText tbody）。append（markup）; $（＃myInput）VAL（）。 //检查它是否是5的倍数？ paginateTable（）; }）; function paginateTable（）{$（'＃paginationDiv'）。html（'< div class =container>< ul class =pagination pagination-lgid =pagedText>< / ul>< ; / DIV>'）;让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 =＃ =$ {i}class =pagedLink> $ {pageNum}< / a>< /立GT;`）; } $（'＃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 =stylesheethref =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-lgtype =textid =myInputplaceholder =Enter text/> < table id =tblTextclass =table table-bordered table-hover table-responsive> < TBODY> < / tbody的> < /表> < div id =paginationDiv> < / div>< / body>< / html> 这是我的解决方案的小提琴。 / p> 任何帮助将不胜感激，谢谢。解决方案使用承诺在promise.then（）触发器中解析后解析对paginateTable（）的调用点击分页的最后一页以显示最新项目： $（function（）{ $（＃myInput）。keyup（function（event） { //在回车时附加话语表 if（event.keyCode === 13） { let text = $（'＃myInput'）。value（）; if（text！= ） { let markup =`< tr>< td> $ {text}< / td>< / tr>`; $（＃tblText tbody ）.append（标记）; $（'＃myInput'）。val（' ）; //检查 如果是5的倍数？ //创建promise对象以解析promise的paginateTable（）和.then（）以触发分页中最后一页的click事件 var promiseToNewPage = new Promise（function（resolve，reject）{ resolve（paginateTable（））; }）; promiseToNewPage.then（function（）{ DisplayNewestPage（）; }）; } } }）; 函数paginateTable（） { $（'＃tableDiv'）。html（'< div class =container> < ul class =pagination pagination-lgid =pagedText>< / ul>< / div>'）; 让rowsShown = 5; let totalRows = $（'＃tblText tbody tr'）。length; let numPages = totalRows / rowsShown; for（let i = 0; i< numPages; i ++） { let pageNum = i + 1; $（'＃pubText'）。append（`< li>< a href =＃ =$ {i}class =pagedLink> $ {pageNum}< / a> ;< /立GT;`）; } $（'＃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）; }）; } }）; //触发器点击最后一个pagedLink类项函数DisplayNewestPage（）{ $（'。pagedLink'）。last（）。trigger（'click'）; } I am trying to build an application where the user can input text from a textbox and the text will append to dynamically generated table. The table will also have Bootstrap Pagination, where I only want to show 5 table rows per table view. 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)Before:After:Here's the code snippet I'm working on $(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>Here's the fiddle to my solution.Any help will be appreciated, Thanks. 解决方案 Use a promise to resolve your call to paginateTable() after it resolves in the promise.then() trigger click on last page of pagination to show newest item:$(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 itemfunction DisplayNewestPage(){ $('.pagedLink').last().trigger('click');} 这篇关于在向表中动态添加文本时，无法显示分页表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
10-28 18:53
Powered by LMLPHP ©2024 let 0.005648