jquery 分页-优快云博客

本文链接：https://blog.youkuaiyun.com/Baple/article/details/11669889

本文介绍了一个使用JavaScript实现的表格分页功能。通过简单的HTML表格结构配合JavaScript代码，可以将长表格分成多个页面显示，并且提供了手动翻页的功能。该实现利用了jQuery库简化DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<table width="100%" border="1" cellspacing="0" cellpadding="0" class="page">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<div class="pagediv"></div>
<script type="text/javascript">
$(function () {
            $('table.page').each(function () {
 
                var currentPage = 0;
                var numPerPage = 6;
                var $table = $(this);
 
                var pageFunction = function () {
                    $table.find('tbody tr').show()
    .slice(0, currentPage * numPerPage)
    .hide()
    .end()
    .slice(((currentPage + 1) * numPerPage - 1) + 1)
    .hide()
    .end();
                } //end of   pageFunction()
                var num_row = $table.find('tbody tr').length;
                var num_pages = Math.ceil(num_row / numPerPage);
                var $pager = $('<div></div>');
                for (var i = 0; i < num_pages; i++) {
                    $('<span> 第' + (i + 1) + '页 </span>')
      .bind("click", { 'cssrain': i }, function (event) {
          currentPage = event.data['cssrain'];
          pageFunction();
          $(this).addClass('current').siblings().removeClass('current');
      })
     .appendTo(".pagediv");
                }
 
                $pager.insertBefore($table);
                $pager.find("span:first").addClass('current');
                pageFunction();
            })//end of each()
        })//enf of function
</script>