Question

我正在尝试使用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的官方文档是什么，可供参考？

Answer 1

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

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

Answer 2

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

DataTables是一个非常灵活的高级表格插件，适用于jQuery。在 SB Admin，我们正在使用专为此版本构建的DataTables Bootstrap 3.我们还定制了表格标题以使用Font 令人敬畏的图标代替图像。有关完整文档 DataTables，访问他们的网站https://datatables.net/。

SB Admin 2主题：https://startbootstrap.com/template-overviews/sb-admin-2/
DataTable实例：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">

在标头中包含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的不利之处在于需要一次加载所有数据，因此如果要显示大数据，可能会降低渲染速度。可以建立一个服务器端＆＃34;使用jQuery.ajax()获取所选页面的内容并使用jQuery替换表内容的分页版本。

如何在bootstrap表上添加分页和搜索

2 个答案: