个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试在我的 javascript 中使用以下代码来呈现表格:
$('#actionTable').bootstrapTable({
//Assigning data to table
data: serviceDetails.actions
});
}
这是我在 HTML 上的表格定义
<table id="actionTable" class="table table-bordered table-striped">
<thead>
<tr>
<th data-field="service_type">Action</th>
<th data-field="resolution_url" data-formatter="LinkFormatter">Endpoint URL</th>
</tr>
</thead>
</table>
表格按预期呈现，我想在顶部添加一个搜索框，在底部添加分页，我们如何才能实现这一点。 bootstrapTable的官方文档有哪些可以引用的？
最佳答案
在 SB Admin 2 Bootstrap 3 主题中，为了显示高级和响应式表格，使用了 DataTables for jQuery 插件。来自 SB Admin 2 网站:
DataTables is a very flexible, advanced tables plugin for jQuery. In SB Admin, we are using a specialized version of DataTables built for Bootstrap 3. We have also customized the table headings to use Font Awesome icons in place of images. For complete documentation on DataTables, visit their website at https://datatables.net/.
SB Admin 2 主题:https://startbootstrap.com/template-overviews/sb-admin-2/
数据表实例:https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/tables.html
对于我的项目，我通过以下方式应用了 SB Admin 主题中的 DataTable:
创建<table>与 width="100%"用于响应行为和可选的一些 CSS 类
<table width="100%" class="table table-striped table-bordered table-hover" id="actionTable">
在 header 中包含 CSS 样式表:dataTables.bootstrap.css 和可选的 dataTables.responsive.css
<!-- DataTables CSS -->
<link href="dataTables.bootstrap.css" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="dataTables.responsive.css" rel="stylesheet">
在<body>底部包含JS脚本 block :jquery.dataTables.min.js 和可选的 dataTables.bootstrap.js 和 dataTables.responsive.js:
<script src="jquery.dataTables.min.js"></script>
<script src="dataTables.bootstrap.min.js"></script>
<script src="dataTables.responsive.js"></script>
为 $(document).ready 中的表执行 DataTable 脚本。如果您包含可选脚本和样式表，请将响应设置为 true:
<script>
$(document).ready(function() {
$('#actionTable').DataTable({
responsive: true
});
});
</script>
最后，您应该得到符合您要求的表格:顶部的搜索框和底部的分页+列排序和页面大小选择框。
使用DataTable的缺点是需要一次性加载所有数据，因此如果要显示大数据，可能会减慢渲染速度。可以使用 jQuery.ajax() 制作“服务器端”版本的分页。使用 jQuery 获取所选页面的内容并替换表格内容。
关于javascript - 如何在引导表上添加分页和搜索，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49138065/
25
4
0
我在我的应用程序中使用 Hibernate Search。其中一个子集合被映射为 IndexedEmbedded。子对象有两个字段，一个是 id，另一个是日期(使用日期分辨率到毫秒)。当我搜索 id=
The App Engine Search API有一个 GeoPoint 字段。可以用它来进行半径搜索吗？例如，给定一个 GeoPoint，查找位于特定半径内的所有文档。 截至目前，它看起来像 Ge
客户对我正在做的员工管理项目提出了这个新要求，以允许他们的用户进行自定义 bool 搜索。 基本上允许他们使用:AND、OR、NOT、括号和引号。 实现它的最佳方法是什么？我检查了 mysql，它们使
很想知道哪个更快 - 如果我有一个包含 25000 个键值对的数组和一个包含相同信息的 MySQL 数据库，搜索哪个会更快？ 非常感谢大家! 最佳答案 回答这个问题的最好方法是执行基准测试。 关于ph
我喜欢 smartcase，也喜欢 * 和 # 搜索命令。但我更希望 * 和 # 搜索命令区分大小写，而/和 ?搜索命令遵循 smartcase 启发式。 是否有隐藏在某个地方我还没有找到的设置？我宁
我有以下 Marklogic 查询，当在查询控制台中运行时，它允许我检索具有管理员权限的系统用户: xquery version "1.0-ml"; import schema namespace b
我希望当您搜索例如“A”时，所有以“A”开头的全名都会出现。因此，如果名为“Andreas blabla”的用户将显示 我现在有这个: $query = "SELECT full_name, id,
我想在我的网站上添加对人名的搜索。好友列表已经显示在页面上。 我喜欢 Facebook 这样做的方式，您开始输入姓名，Facebook 只会显示与查询匹配的好友。 http://cl.ly/2t2V0
您好，我在我的网站上进行搜索时遇到此错误。 Fatal error: Uncaught Error: Call to undefined function mysql_connect() in /ho
声明( 叠甲 )：鄙人水平有限，本文为作者的学习总结，仅供参考。 1. 搜索介绍 搜索算法包括深度优先搜索（DFS）和广度优先搜索（BFS）这两种，从起点开始，逐渐扩大
我正在为用户列表使用 FuturBuilder。我通过 futur: fetchpost() 通过 API 获取用户。在专栏的开头，我实现了一个搜索栏。那么我该如何实现我的搜索栏正在搜索呢？ Cont
我正在使用 MVC5，我想搜索结果并停留在同一页面，这是我在 Controller (LiaisonsProjetsPPController) 中执行搜索操作的方法: public ActionRes
Azure 搜索中的两种方法 Upload 与 MergeOrUpload 之间有什么区别。 他们都做完全相同的事情。即，如果文档不存在，它们都会上传文档；如果文档已经存在，则替换该文档。 由于这两种
实际上，声音匹配/搜索的当前状态是什么？我目前正在远程参与规划一个 Web 应用程序，该应用程序将包含和公开记录的短音频剪辑(最多 3-5 秒，人名)的数据库。已经提出了一个问题，是否可以实现基于用户
在商业应用程序中，具有数百个面并不罕见。当然，并非所有产品都带有所有这些标记。 但是在搜索时，我需要添加一个方面查询字符串参数，其中列出了我想要返回的所有方面。由于我事先不知道相关列表，因此我必须在查
当我使用nvcc 5.0编译.cu文件时，编译器会为我提供以下信息。 /usr/bin/ld: skipping incompatible /usr/local/cuda-5.0/lib/libcud
我正在使用基于丰富的 Lucene 查询解析器语法的 Azure 搜索。我将“~1”定义为距离符号的附加参数)。但我面临的问题是，即使存在完全匹配，实体也没有排序。 (例如，“blue~1”将返回“b
我目前有 3 个类，一个包含 GUI 的主类，我在其中调用此方法，一个包含数据的客户类，以及一个从客户类收集数据并将其放入数组列表的 customerList 类，以及还包含搜索数组列表方法。 我正在
假设我有多个 6 字符的字母数字字符串。 abc123、abc231、abc456、cba123、bac231 和 bac123 。 基本上我想要一个可以搜索和列出所有 abc 实例的选择语句。 我只
我有这个表 "Table"内容: +--------+ | Serial | +--------+ | d100m | <- expected result | D100M | <- expect
我是一名优秀的程序员,十分优秀！