fastadmin框架的BootstrapTable(以下简称BTable)组件可以使用很多参数,下面是一些常用的参数:
- url: 指定从哪个地址获取数据。
- columns: 定义表格的列头和数据源字段名。
- pagination: 是否启用分页。
- pageSize: 定义一页显示的记录条数。
- sidePagination: 定义分页在客户端还是服务端进行。
- search: 是否启用搜索框。
- showRefresh: 是否显示刷新按钮。
- showExport: 是否显示导出按钮。
在PHP控制器中读取列表并使用BootstrapTable显示,可以按照以下步骤:
-
创建控制器,处理前端请求返回所需数据。
-
定义获取数据源的方法,如从数据库中读取,组装成数组格式。
-
将获取到的数据按照BootstrapTable要求的格式组装成JSON格式。
-
返回组装好的JSON数据。
示例代码如下:
public function index()
{
return $this->fetch();
}
public function getTableData()
{
// 从数据库获取数据
$list = Db::name('user')->select();
// 按照BootstrapTable格式组装数据
$data = [
'total' => count($list),
'rows' => $list
];
// 将数据转换成JSON格式返回
return json_encode($data);
}
在前端的模板文件中,可以使用以下代码来加载BootstrapTable:
<table id="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="username">Username</th>
<th data-field="email">Email</th>
<th data-field="status">Status</th>
<th data-field="date">Date</th>
</tr>
</thead>
</table>
<script>
$(function() {
$('#table').bootstrapTable({
url: '/admin/demo/getTableData', // 获取数据的地址
pagination: true, // 是否启用分页
pageSize: 10, // 每页记录数
sidePagination: 'server', // 分页在服务端进行
search: true, // 启用搜索框
showRefresh: true, // 显示刷新按钮
showExport: true, // 显示导出按钮
columns: [{
field: 'id',
title: 'ID'
},
{
field: 'username',
title: 'Username'
},
{
field: 'email',
title: 'Email'
},
{
field: 'status',
title: 'Status'
},
{
field: 'date',
title: 'Date'
}
]
});
});
</script>
以上示例代码中,getTableData()方法返回的数据被BootstrapTable自动解析和渲染成了一个带有分页和搜索功能的表格。