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

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

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

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

SB管理员2主题：https://startbootstrap.com/template-overviews/sb-admin-2/

DataTable现场示例：https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/tables.html

对于我的项目，我通过以下方式应用了SB管理主题中的DataTable：

使用width="100%"为响应行为创建<table>，还可以创建一些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脚本: 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脚本。如果包含可选脚本和样式表，请将responsive设置为true：

<script>
    $(document).ready(function() {
      $('#actionTable').DataTable({
        responsive: true
      });
    });
</script>

最后，您应该得到符合您的需求的表格:顶部的搜索框和底部的分页+列排序和页面大小选择框。

使用DataTable的缺点是需要一次加载所有数据，所以如果您想要显示大数据，这可能会减慢渲染速度。通过使用jQuery.ajax()获取所选页面的内容并使用jQuery替换表格内容，可以创建一个“服务器端”版本的分页。

Answer 2

您可以使用我使用的表，它包括分页和一个搜索输入，它会将表过滤为您要搜索的内容。如果你想要bootstrap样式，只需在你的头文件中链接到你的bootstrap css文件，并将表类包含到你的表中。

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