如何为Twitter Bootstrap分页设置页面内容
如何为Twitter Bootstrap分页设置页面内容
提问于 2012-05-10 20:27:27
我正在改变一个客户端的web应用程序，以使用Twitter Bootstrap而不是YUI，并有一个与Bootstrap分页相关的问题。我在这里查看了分页的文档：
http://cssdeck.com/item/271/twitter-bootstrap-pagination-and-pager
但这似乎只是展示了如何创建分页标题，而不是如何为各个页面设置实际的页面内容。有没有人有更完整的使用Twitter Bootstrap进行分页的例子的链接？
我实际上希望有一个jquery插件，它允许我加载div中的所有内容页面，然后根据找到的页面数量自动生成分页头。Bootstrap分页不这样做吗？如果没有，有没有人知道基于Bootstrap的插件可以做到这一点？
回答 1
Stack Overflow用户
发布于 2013-02-20 13:18:56
我觉得你应该试试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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10533993
复制相关文章
相似问题
腾讯云开发者
