5

我正在为客户端更改 Web 应用程序以使用 Twitter Bootstrap 而不是 YUI，并且有一个与 Bootstrap 分页有关的问题。我在这里查看了分页文档：

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

但这似乎只显示了如何创建分页标题，而不是如何为各个页面设置实际页面内容。有没有人有一个使用 Twitter Bootstrap 的更完整的分页示例的链接？

我实际上希望有一个 jquery 插件，它允许我加载 div 中的所有内容页面，然后为找到的页面数自动生成分页标题。Bootstrap分页不这样做吗？如果没有，是否有人知道基于 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 回答