在頁面加載時使用分頁顯示最后一頁上的所有表格行

Question

我需要在加載時顯示分頁的最后一頁而不是第一頁。

 $(document).ready(function(){ $('#data').after('<div id="nav"></div>'); var rowsShown = 5; var rowsTotal = $('#data tbody tr').length; var numPages = rowsTotal/rowsShown; for(i = 0;i < numPages;i++) { var pageNum = i + 1; $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> '); } $('#data tbody tr').hide(); $('#data tbody tr').slice(0, rowsShown).show(); $('#nav a:first').addClass('active'); $('#nav a').bind('click', function(){ $('#nav a').removeClass('active'); $(this).addClass('active'); var currPage = $(this).attr('rel'); var startItem = currPage * rowsShown; var endItem = startItem + rowsShown; $('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem). css('display','table-row').animate({opacity:1}, 300); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="data" border="1"> <thead> <tr> <th>head</th> </tr> </thead> <tbody> <tr> <td>data1</td> </tr> <tr> <td>data2</td> </tr> <tr> <td>data3</td> </tr> <tr> <td>data4</td> </tr> <tr> <td>data5</td> </tr> <tr> <td>data6</td> </tr> <tr> <td>data7</td> </tr> <tr> <td>data8</td> </tr> <tr> <td>data9</td> </tr> <tr> <td>data10</td> </tr> </tbody> </table>

目前，每行有 1 個數據，有 2 個數據用於示例目的。 這意味着分頁中有 2 個頁面，分別為 1 和 2，當頁面加載時，我需要它加載第 2 頁，即最后一頁而不是第一頁。

添加行時，可能有 10 頁，當頁面加載時，我需要它加載最后一頁，即第 10 頁。

Answer 1

在 jQuery 選擇器上使用.last()方法來選擇查詢中的最后一個元素並設置它的狀態。

編輯：您應該在多行之間切換的方式完全相同。 通過將您的表格分成更小的塊並切換表格的可見性來實現。

我已經在下面更新了我的答案並升級了您的代碼。

 $(document).ready(function(){ $('#data').after('<div id="nav"></div>'); // Select all the tables. var $tables = $('#data table'); var tablesShown = 1; var tablesTotal = $tables.length; var numPages = tablesTotal / tablesShown; for(var i = 0;i < numPages;i++) { var pageNum = i + 1; $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> '); } // Select all links. var $navs = $('#nav a'); // Hide all rows and show the last one. $tables.hide().last().show(); // Add active to last link $navs.last().addClass('active'); // Listen to click. // Use on instead of bind $navs.on('click', function(){ $navs.removeClass('active'); $(this).addClass('active'); var currPage = $(this).attr('rel'); var $currentTable = $($tables.get(currPage)); $tables.hide(); $currentTable.show(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="data"> <table> <thead> <tr> <th>head</th> </tr> </thead> <tbody> <tr> <td>data1</td> </tr> <tr> <td>data2</td> </tr> <tr> <td>data3</td> </tr> <tr> <td>data4</td> </tr> <tr> <td>data5</td> </tr> </tbody> </table> <table> <thead> <tr> <th>head</th> </tr> </thead> <tbody> <tr> <td>data6</td> </tr> <tr> <td>data7</td> </tr> <tr> <td>data8</td> </tr> <tr> <td>data9</td> </tr> <tr> <td>data10</td> </tr> </tbody> </table> </div>

Answer 2

嘗試將以下行添加到您的代碼中：

$('#data tbody tr').slice(0, rowsShown).show();
// addidional line
$('#data tbody tr').last().show();

這應該顯示最后一頁。