在页面加载时使用分页显示最后一页上的所有表格行

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();

这应该显示最后一页。