5

クライアントが YUI の代わりに Twitter Bootstrap を使用するように Web アプリケーションを変更する作業を行っており、Bootstrap ページネーションに関する質問があります。ここでページネーションのドキュメントを見てきました：

http://cssdeck.com/item/271/twitter-bootstrap-pagination-and-pager

しかし、これは、個々のページの実際のページ コンテンツをセットアップする方法ではなく、ページネーション ヘッダーを作成する方法を示しているだけのようです。Twitter Bootstrap を使用したページネーションのより完全な例へのリンクを持っている人はいますか?

私は実際には、すべてのコンテンツ ページを div にロードし、見つかったページ数に対してページネーション ヘッダーを自動的に生成できるようにする jquery プラグインを望んでいました。ブートストラップのページネーションはこれを行いませんか? そうでない場合、これを行う Bootstrap に基づくプラグインを知っている人はいますか?

4

1 に答える 1

3

Jquery DataTables http://datatables.net/blog/Twitter_Bootstrapを試す必要があると思います。

ライブデモ: http://datatables.net/media/blog/bootstrap/

更新された回答

Jquery Datatable - Bootstrap 3 (ページネーションあり)

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>DataTables Bootstrap 3 example</title>

    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css">

    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10-dev/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="dataTables.bootstrap.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#example').dataTable();

        } );
    </script>
</head>


<body>
<div class="container">

 <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
<thead>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
</thead>
<tbody>
    <tr class="odd gradeX">
        <td>Trident</td>
        <td>Internet
             Explorer 4.0</td>
        <td>Win 95+</td>
        <td class="center"> 4</td>
        <td class="center">X</td>
    </tr>
    <tr class="even gradeC">
        <td>Trident</td>
        <td>Internet
             Explorer 5.0</td>
        <td>Win 95+</td>
        <td class="center">5</td>
        <td class="center">C</td>
    </tr>
    <tr class="odd gradeA">
        <td>Trident</td>
        <td>Internet
             Explorer 5.5</td>
        <td>Win 95+</td>
        <td class="center">5.5</td>
        <td class="center">A</td>
    </tr>
    <tr class="even gradeA">
        <td>Trident</td>
        <td>Internet
             Explorer 6</td>
        <td>Win 98+</td>
        <td class="center">6</td>
        <td class="center">A</td>
    </tr>
    <tr class="odd gradeA">
        <td>Trident</td>
        <td>Internet Explorer 7</td>
        <td>Win XP SP2+</td>
        <td class="center">7</td>
        <td class="center">A</td>
    </tr>
    <tr class="even gradeA">
        <td>Trident</td>
        <td>AOL browser (AOL desktop)</td>
        <td>Win XP</td>
        <td class="center">6</td>
        <td class="center">A</td>
    </tr>

  </tbody>
  </table>

 </div>

 </body>
 </html>

ここからファイルをダウンロードできます: https://copy.com/ViElPNKAUNCR

于 2013-02-20T05:18:55.740 に答える