来人，上效果图
1、引入样式文件（去github下载样式文件）
<!--插件开-->
<link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap.min.css">
<link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap-editable.css">
<link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap-table.min.css">
<!-- JavaScript -->
<script src="__PUBLIC__/jquery/3jquery.min.js"></script> <script src="__PUBLIC__/btjs/bootstrap.min.js"></script>
<script src="__PUBLIC__/btjs/bootstrap-editable.min.js"></script>
<script src="__PUBLIC__/btjs/bootstrap-table.js"></script>
<script src="__PUBLIC__/btjs/bootstrap-table-zh-CN.js"></script> <!--插件结-->
<!-- Page Specific Plugins -->
<script src="__PUBLIC__/btjs/raphael-min.js"></script>
<script src="__PUBLIC__/btjs/tablesorter/jquery.tablesorter.js"></script>
2、糊代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!--插件开-->
<link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap.min.css">
<link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap-editable.css">
<link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap-table.min.css">
<!-- JavaScript -->
<script src="__PUBLIC__/jquery/3jquery.min.js"></script> <script src="__PUBLIC__/btjs/bootstrap.min.js"></script>
<script src="__PUBLIC__/btjs/bootstrap-editable.min.js"></script>
<script src="__PUBLIC__/btjs/bootstrap-table.js"></script>
<script src="__PUBLIC__/btjs/bootstrap-table-zh-CN.js"></script> <!--插件结-->
<!-- Page Specific Plugins -->
<script src="__PUBLIC__/btjs/raphael-min.js"></script>
<script src="__PUBLIC__/btjs/tablesorter/jquery.tablesorter.js"></script> </head>
<body style=" margin-top: 0px;">
<div class="tplay-body-div">
<table class="table table-bordered table-hover table-striped tablesorter"
data-toggle="table" ///////////////////////////////////////////////////////////重点在这！！！！！！！敲黑板！！！！！！！！！下次要考！！！！！！！！！！！！！！！！！！
data-pagination="false"
data-pagination-loop="false"
data-search="true"
data-show-pagination-switch="false"
data-show-columns="true"
data-page-number="1"
data-page-size="5"
data-page-list="[5,10,25]"
data-click-to-select="true"
data-single-select="true"
data-striped="true"> <thead>
<tr>
{volist name="fieldinfo" id="val"}
<th >{$val.Comment}</th>
{/volist}
</tr>
</thead>
<tbody>
{volist name="data" id="v"}
<tr>
{volist name="field" id="z"}
<td>{$v["$z"]}</td>
{/volist}
</tr>
{/volist}
</tbody>
</table>
{$data->render()}
</div> <script src="__PUBLIC__/jquery/jquery.min.js"></script>
</body>
</html>
3、文件全部引入后，可能会出现没有图标的问题，没关系， 在 bootstrap.min.css 同级的文件下放入 bootstrap-theme.min.css ，万事大吉