0

HTMLテーブル（ http://flaviusmatis.github.io/simplePagination.js/ ）（特にライトテーマ）のページネーションにこの単純なページネーションjavascriptライブラリを使用しようとしていますが、どういうわけか私のページネーションがhtmlテーブルで機能していません..

上記のページネーション JavaScript を使用して、テーブルに 2 つのアイテムを 1 つのページに表示したいと考えています。

以下は、上記と同じページネーション JavaScript を使用して試した完全な HTML コードです。ほぼ動作していますが、HTML ページをロードすると、すべてが表示されます。つまり、すべての行が 1 つに表示されます。 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