如何在引导表上添加分页和搜索答案

【问题标题】：How to add pagination and search on bootstrap table如何在引导表上添加分页和搜索
【发布时间】：2018-03-07 04:54:52
【问题描述】：

我正在尝试在我的 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的官方文档有哪些可以参考的？

【问题讨论】：

标签： javascript html

【解决方案1】：

在 SB Admin 2 Bootstrap 3 主题中，为了显示高级和响应式表格，使用了 DataTables for jQuery 插件。来自 SB Admin 2 网站：

DataTables 是一个非常灵活、高级的 jQuery 表格插件。在 SB Admin，我们正在使用为 Bootstrap 3. 我们还自定义了表格标题以使用字体令人敬畏的图标代替图像。有关完整的文档 DataTables，请访问他们的网站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：

使用 width="100%" 创建 <table> 以实现响应式行为和可选的一些 CSS 类

<table width="100%" class="table table-striped table-bordered table-hover" id="actionTable">

在标题中包含 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 脚本：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替换表格内容来制作“服务器端”版本的分页。

【讨论】：

【解决方案2】：

您可以使用我使用的表格，其中包括分页和搜索输入，该输入会将表格过滤到您搜索的内容。如果您想要引导样式，只需在标题中链接到引导 css 文件并将表类包含到您的表中。

这里是回购： https://github.com/psychatelli/dynamic-table-pagination-search

【讨论】：