<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bootstrap datatable demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap-responsiv.css">
<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/dataTables.bootstra.css">
<style>
body{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<h1>Datatables + Bootstrap 组合基础示例 1</h1>
<div>
<ul class="breadcrumb">
<li>
基本功能：
</li>
<li>
分页 <span class="divider">/</span>
</li>
<li>
排序 <span class="divider">/</span>
</li>
<li>
过滤
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<table class="table table-striped table-bordered table-hover datatable">
<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>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">
C/A <sup>1</sup>
</td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/jquery.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap.min.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function() {
$('.datatable').dataTable( {
"oLanguage": {
"sUrl": "/uploads/rs/238/n8vhm36h/zh_CN.json"
}
});
} );
</script>
</div>
</body>
</html>
elang0705
- 浏览: 95049 次
- 性别:
- 来自: 西安
-
文章分类
最新评论
-
wst0350：
.....
Mybatis 动态获取字段值（不需要创建javabean） -
PeTiRo：
AND EMPNAME LIKE '%${empname}%' ...
Mybatis like 模糊查询问题
dataTables+bootstrap 示例
分享到：
发表评论
相关推荐
《Datatables Bootstrap4在WebVB6中的应用及数据库集成》 在现代网页开发中，数据展示和管理是一项重要任务，而Datatables与Bootstrap4的结合则为开发者提供了强大的工具。本资源“Datatables bootstrap4_database_...
Bootstrap3、Datatables、Servlet和SQLite3是这个项目的核心技术栈，它们共同构建了一个功能完善的后台数据管理示例。下面将分别对这些技术及其在该项目中的应用进行详细解释。 Bootstrap3是一个流行的前端框架，由...
【datatables bootstrap demo下载】是一个资源包，包含了使用Datatables插件与Bootstrap框架结合的示例代码。这个包对于那些想要学习如何在自己的项目中整合这两个流行工具的开发者来说非常有帮助。Datatables是一款...
使用方法： ... ... ...也可使用Eclipse直接导入此项目文件...分页栏增加跳页功能（直接修改了dataTables.bootstrap.js和dataTables.bootstrap.css） CSS实现单元格超长文字省略号显示 CSS实现单元格连续纯字母数字强制换行显示
1. **form_advanced_components.html**：这个文件可能包含Bootstrap中高级表单组件的示例，如日期选择器、时间选择器、滑块、开关控件等。这些组件可以增强用户在后台系统中输入和管理数据的体验。 2. **font...
在本示例中，"表格 demo datatables 回调" 是一个利用 Datatables 和 Bootstrap 框架实现的交互式表格演示。Datatables 是一个强大的JavaScript库，用于增强HTML表格的功能，而Bootstrap则是一个流行的前端开发框架...
**jQuery DataTables与Bootstrap整合示例** `JqueryDataTablesBootstrapDemo`是一个综合演示，展示了如何将流行的前端库jQuery DataTables与Bootstrap框架结合使用，以创建功能强大的、响应式的表格。这个Demo旨在...
使用DataTable默认的ajax交互功能，对传给后台和从后台获取的数据都有命名格式要求，这样一来耦合度较高，不利于后期扩展，不能...分页栏增加跳页功能（直接修改了dataTables.bootstrap.js和dataTables.bootstrap.css）
**Datatables 示例** Datatables 是一个强大的开源JavaScript库，用于将HTML表格转化为功能丰富的交互式数据展示工具。它提供分页、排序、过滤等多种功能，适用于网页中的数据管理。本示例旨在帮助新手快速理解并...
2. **CSS 文件**: DataTables 提供了预设的样式文件（如 `dataTables.bootstrap.css` 或 `dataTables.foundation.css`），这些文件用于美化表格的显示效果，使其适应不同的前端框架（如Bootstrap、Foundation等）。...
Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...
总的来说，"DataTables.zip"提供的代码示例展示了如何使用DataTables框架来创建功能丰富的数据展示表格。通过深入研究“DataTables.html”，你可以学习如何配置和扩展DataTables，以满足你在实际项目中的各种需求。...
6. **插件集成**：Bootstrap本身可能不直接提供可编辑表格的功能，但有许多第三方插件可以实现，如DataTables、Bootstrap Table等。这些插件通常封装了上述所有功能，只需简单配置和调用API即可实现。 7. **响应式...
- `css` 目录：包含 DataTables 的默认样式文件，如 `dataTables.bootstrap.css` 和 `dataTables.foundation.css`。 - `images` 目录：存储与 DataTables 功能相关的图像资源。 - `js` 目录：包含核心 JavaScript ...
<link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap4.min.css"> <script src="js/jquery.dataTables.min.js"> <script src="js/dataTables.bootstrap4.min.js"> ``` 5. **自定义功能**：...
- **Bootstrap Table**：虽然两者都基于jQuery，但Datatables提供了更多高级特性和定制选项。 4. **最佳实践** - **优化性能**：对于大数据集，推荐使用服务器端处理，减少前端内存占用。 - **响应式设计**：...
总的来说，这个Bootstrap表格模板项目综合运用了前端开发的多个技术点，包括Bootstrap的CSS和组件，jQuery的事件处理和DOM操作，以及可能涉及的第三方库如DataTables，来实现一个功能完善的动态表格。它对于开发者来...
通过学习和理解这个 "bootstrap-paginator-master.zip" 示例，开发者可以更好地掌握如何在实际项目中整合 Bootstrap 和 DataTables，实现高效且美观的分页功能。这不仅提高了用户体验，也优化了服务器资源的使用。
jQuery DataTables是一个功能强大的jQuery插件，它用于对HTML表格进行增强，使之支持排序、搜索、分页和自定义显示等功能。...如果需要进一步了解各个属性的详细用法，可以访问官方文档或者示例网站进行深入学习。
BootstrapTable是一款基于Bootstrap框架的前端数据表格插件，它提供了丰富的功能，如排序、过滤、分页、自定义列等...如果仍然遇到困难，可以进一步查阅BootstrapTable的官方文档或社区资源，寻找更多示例和解决方案。