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

我正在尝试使用这个简单的分页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>

有人可以帮助我吗？

感谢您的帮助..

要将每页 2 个或更多项目作为表格的行放置，您需要通过 tbody 元素将它们环绕并将它们设置为页面。

脚本的问题在于您没有将第一页设置为仅在 init 上可见。

我认为它应该看起来像这样：

<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>

相关内容

最新更新

热门标签：