0

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

有人可以帮我吗？

谢谢您的帮助..

4

1 回答 1

0

要每页放置 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>
于 2013-10-26T18:50:36.363 回答