HTML分页在第一页上搞砸了，之后它工作正常吗？答案

【问题标题】：HTML pagination messed up on first page and after that it works fine?HTML分页在第一页上搞砸了，之后它工作正常吗？
【发布时间】：2013-10-27 02:50:36
【问题描述】：

我正在尝试使用这个简单的分页 javascript 库在 HTML 表格 (http://flaviusmatis.github.io/simplePagination.js/)（特别是轻主题）上进行分页，但不知何故我的分页在我的 html 表格上不起作用..

我想通过使用上面的分页 javascript 在一个页面中显示我的表格中的 2 个项目。当我点击第二个分页选项卡时，它应该会显示下两个项目并继续直到它完成..

下面是我的完整 HTML 代码，我在其中尝试使用与上面相同的分页 javascript。它几乎对我有用，但不知何故，当我第一次加载 HTML 页面时，它向我展示了所有内容，即一个 HTML 表格中的所有行，但如果我点击第 2 页，它就会开始正确地向我展示。所以我肯定搞砸了。

<html>
<head>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="../jquery.simplePagination.js"></script>
<link href="../simplePagination.css" rel="stylesheet" type="text/css" />


    <style type="text/css">
table {
    width: 40em;
    margin: 2em auto;
    }

    thead {
    background: #000;
    color: #fff;
    }

    td {
    width: 10em;
    padding: 0.3em;
    }

    tbody {
    background: #ccc;
    }

    </style>

    <script>

function test(pageNumber)
{

  var page="#page-id-"+pageNumber;
  $('.select').hide()
  $(page).show()

}

</script>

</head>

<body bgcolor="#F8F8F8">
    <table class="paginated">
        <thead>
            <tr>
                <th>A</th>

                <th>B</th>

                <th>C</th>

                <th>D</th>
            </tr>
        </thead>

        <tbody>
            <tr class="select" id="page-id-1">
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr class="select" id="page-id-2">
                <td>5</td>

                <td>6</td>

                <td>7</td>

                <td>8</td>
            </tr>

            <tr  class="select" id="page-id-3">
                <td>9</td>

                <td>10</td>

                <td>11</td>

                <td>12</td>
            </tr>

            <tr  class="select" id="page-id-4">
                <td>13</td>

                <td>14</td>

                <td>15</td>

                <td>16</td>
            </tr>

            <tr class="select" id="page-id-5">
                <td>17</td>

                <td>18</td>

                <td>19</td>

                <td>20</td>
            </tr>

            <tr class="select" id="page-id-6">
                <td>21</td>

                <td>22</td>

                <td>23</td>

                <td>24</td>
            </tr>

            <tr class="select" id="page-id-7">
                <td>25</td>

                <td>26</td>

                <td>27</td>

                <td>28</td>
            </tr>

        </tbody>
    </table>

<div id="choose">
</div>


    <script language="javascript">
    $(function() {
        $('#choose').pagination({
            items: 10,
            itemsOnPage: 2,
            cssStyle: 'light-theme',
            onPageClick: function(pageNumber){test(pageNumber)}
        });
    });
    </script>

    </body>
</html>

有人可以帮我解决这个问题吗？

感谢您的帮助..

【问题讨论】：

标签： javascript jquery html css pagination

【解决方案1】：

要在每页放置 2 个或更多项目作为表格的行，您需要用 tbody 元素将它们包裹起来并将它们设置为页面。

脚本的问题是您没有将第一页设置为仅在初始化时可见。

我认为它应该是这样的：

<html>
<head>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="../jquery.simplePagination.js"></script>
<link href="../simplePagination.css" rel="stylesheet" type="text/css" />


    <style type="text/css">
table {
    width: 40em;
    margin: 2em auto;
    }

    thead {
    background: #000;
    color: #fff;
    }

    td {
    width: 10em;
    padding: 0.3em;
    }

    tbody {
    background: #ccc;
    }

    </style>

    <script>

function test(pageNumber)
{

  var page="#page-id-"+pageNumber;
  $('.select').hide()
  $(page).show()

}

</script>

</head>

<body bgcolor="#F8F8F8">
    <table class="paginated">
        <thead>
            <tr>
                <th>A</th>

                <th>B</th>

                <th>C</th>

                <th>D</th>
            </tr>
        </thead>

        <tbody class="select" id="page-id-1">
            <tr>
                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>
            </tr>

            <tr>
                <td>5</td>

                <td>6</td>

                <td>7</td>

                <td>8</td>
            </tr>
          </tbody>
          <tbody class="select" id="page-id-2">
            <tr>
                <td>9</td>

                <td>10</td>

                <td>11</td>

                <td>12</td>
            </tr>

            <tr>
                <td>13</td>

                <td>14</td>

                <td>15</td>

                <td>16</td>
            </tr>
          </tbody>
          <tbody   class="select" id="page-id-3">
            <tr>
                <td>17</td>

                <td>18</td>

                <td>19</td>

                <td>20</td>
            </tr>

            <tr>
                <td>21</td>

                <td>22</td>

                <td>23</td>

                <td>24</td>
            </tr>
          </tbody>
          <tbody   class="select" id="page-id-4">
            <tr>
                <td>25</td>

                <td>26</td>

                <td>27</td>

                <td>28</td>
            </tr>
            <tr>
                <td>29</td>

                <td>30</td>

                <td>31</td>

                <td>32</td>
            </tr>
        </tbody>
    </table>

<div id="choose">
</div>


    <script language="javascript">
    $(function() {
        $('#choose').pagination({
            items: 8,
            itemsOnPage: 2,
            currentPage: 1,
            onInit: function () { test(1); },
            cssStyle: 'light-theme',
            onPageClick: function(pageNumber){test(pageNumber)}
        }).pagination('redraw');
    });
    </script>

    </body>
</html>

【讨论】：