在分頁中選擇“全部”選項時如何在引導表上進行延遲加載？

Question

我正在嘗試使用 bootstrapTable pageList 選項“全部”向頁面呈現超過 1000 行。 當我選擇 10、25、50 和 100 時，性能運行良好，但選擇“全部”選項會導致頁面滯后和緩慢。 向下滾動頁面時如何進行延遲加載或其他可以提高性能的方法？

$('#table-users').bootstrapTable({
   pagination: true,
   pageList: [10, 25, 50, 100, 'All']
 )}

上面的代碼是引導插件。 我正在考慮使用 jQuery 來檢測何時向下滾動頁面然后繼續加載數據，但我找不到要執行的解決方案（例如先加載 100 行，然后頁面向下滾動到第 100 行然后加載下一個100 行。）在分頁中單擊“全部”選項時這種魔法。

在引導表中，我嘗試僅在一列上對其進行測試。

columns: [{
                field: 'email',
                title: 'Email',
                formatter: operateEmail,
                sortable: true,
            }]

並且操作電子郵件功能是

function operateEmail(value, row, index) {
    if (index < 24){
        return ['<a class="memoryManager" href="/admin/users/view/'+ row['id']+'">'+value+'</a>'].join('');
    }
}

當我在 50/100/All 上選擇頁面選項時，我試圖僅顯示 25 行數據。 但結果是表格顯示 25 行數據，其余行為空白。 我嘗試使用滾動功能，但似乎不起作用。 在滾動窗口之前，我怎么能不顯示空白行？

Answer 1

根據您的要求，已嘗試模擬滾動並獲取和附加數據。 這可能對您的思考過程有所幫助。 謝謝

 var glblIndex = 0; window.onscroll = function (e) { // called when the window is scrolled. $('#appendMe').append(getDummyData(++glblIndex)); } function getDummyData(nextVal){ if (nextVal< 100) return "<div class='row'><div class='col-md-4'>"+nextVal+++"</div></div>" }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="appendMe"> dummy till page fill <br/><br/><br/><br/><br/><br/> dummy till page fill <br/><br/><br/><br/><br/><br/> dummy till page fill <br/><br/><br/><br/><br/><br/> dummy till page fill <br/><br/><br/> dummy till page fill <br/><br/><br/> dummy till page fill <br/><br/><br/> dummy till page fill <br/><br/><br/> dummy till page fill </div>

Answer 2

你試過jquery嗎？ 我有 800 個數據，速度很快，在我的codepen上為您解決了。

 $( "#update" ).click(function() { for(let i = 1; i <= 800; i++) { $('#table tr:last').after("<tr><td>Some data here</td><td>Some data " + i + " here</td><td>" + "<img src='https://i.pravatar.cc/300?u=random' width: '40' height='40'></td></tr>"); } });

 #table img { border-radius: 50%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.css"> <div class="container mx-5 px-5"> <div style="margin : 100px;"> <button class="btn-primary btn" id="update">ALL Table</button> </div> <table class="table table-sm table-dark table-bordered table-striped table-responsive align-middle" id="table"> <thead> <tr> <th data-field="id">Item ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> <tbody> <tr> <td>Some data here</td> <td>Some data here</td> <td><img src="https://i.pravatar.cc/300?u=random" width: '40' height='40'> </td> </tr> </tbody> </table> </div>