引导表不分页答案

【问题标题】：Bootstrap table not paginating引导表不分页
【发布时间】：2019-08-08 04:13:56
【问题描述】：

在学习在线教程时，我使用 Bootstrap 实现了以下简单的 html 代码，希望能够获得分页、搜索栏等功能：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
integrity="sha384- 
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
crossorigin="anonymous">
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
integrity="sha384- 
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap- 
table@1.15.3/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap- 
table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap- 
table-zh-CN.min.js"></script>

<title>HTML Tables Demo</title>

</head>
<body>
<div class="container">
    <h4 class="text-center">This is a test</h4>
    <table data-toggle="table" data-search="true" data-pagination="true">
    <thread>
    <tr>
        <th data-field="col1">col1</th>
        <th data-field="col2">col2</th>
        <th data-field="col3">col3</th>
    </tr>
    </thread>

    <tr>
    <td>Russell Westbrook</td>
    <td>OKC</td>
    <td>2558</td>
    </tr>

    <tr>
    <td>Michael Jordan</td>
    <td>Chicago</td>
    <td>3214</td>
    </tr>

    </table>
</div>
<script>
    $(document).ready(function() {
        $('.display').DataTable();
    });
</script>
</body>
</html>

正如我们在这里看到的，只是一个包含 2 条记录的简单表。视觉上：

它似乎“有点”工作，因为文本字体发生变化（所以我知道至少正在加载引导程序）但正如我们在上面的屏幕截图中看到的那样，分页没有强制执行，也没有搜索栏，尽管正在实施。

显然，鉴于我缺乏经验 - 为什么搜索栏和表格分页没有生效？

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

分页的默认长度是10。试试

data-pagination="true"
data-page-size="1"

...或尝试多于两行。您可以找到文档here。

【讨论】：

感谢您的回复。链接的文档对事物进行了排序:)

【解决方案2】：

使用DataTable js，最适合未来的餐桌，试试这个

【讨论】：

为什么它更好，它如何回答这个问题？
DataTable 更好，因为一个目标，快速且易于使用