如何为 Twitter Bootstrap 分页设置页面内容答案

【问题标题】：How to setup the page content for Twitter Bootstrap pagination如何为 Twitter Bootstrap 分页设置页面内容
【发布时间】：2012-05-19 00:36:12
【问题描述】：

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

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

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

我实际上希望有一个 jquery 插件，它可以让我加载 div 中的所有内容页面，然后根据找到的页面数自动生成分页标题。 Bootstrap分页不这样做吗？如果没有，是否有人知道基于 Bootstrap 的插件可以做到这一点？

【问题讨论】：

jsfiddle.net/VHZqj/6/show 可能会有所帮助！ :) 只是想更新。

标签： jquery jquery-plugins pagination twitter-bootstrap

【解决方案1】：

我认为你应该试试 Jquery DataTables http://datatables.net/blog/Twitter_Bootstrap。

现场演示：http://datatables.net/media/blog/bootstrap/

更新答案

Jquery 数据表 - 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

【讨论】：

black_belt - 请告诉我数据表分页需要哪些资源？我从datatables.net/download 下载了 zip 文件，其中包括 dataTables.bootstrap.css、dataTables.bootstrap.js、jquery.dataTables.min.js、jquery-DT-pagination.js。出现分页图标，但仍然看不到分页。它显示 Showing 0 to 0 of 0 entries 即使我在数据表中有条目
您是否从我上面给出的链接下载了文件？如果不是，请下载并检查源代码，这应该会给您一个清晰的概念。