如何设置Twitter Bootstrap分页的页面内容

Question

如何设置Twitter Bootstrap分页的页面内容

Bru*_*ill 5 jquery pagination jquery-plugins twitter-bootstrap

我正在为客户端更改Web应用程序以使用Twitter Bootstrap而不是YUI,并且有关于Bootstrap分页的问题.我在这里查看了分页文档:

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

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

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

Answer 1

bla*_*elt 3

我认为你应该尝试 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>

Run Code Online (Sandbox Code Playgroud)

您可以从此处下载文件： https: //copy.com/ViElPNKAUNCR

归档时间：	13 年，9 月前
查看次数：	16334 次
最近记录：	11 年，11 月前