5.30作业：用foreach和volist标签实现模板数据分页显示

一、用foreach标签实现模板数据分页显示

1、新建模型Staff.php，对应staff数据表：

<?php 
namespace app\index\model;
use think\Model; 
class Staff extends Model
{
protected $table = 'staff';
protected $pk = 'staff_id';
}

2、新建控制器Staff.php：

<?php 
namespace app\index\controller;
use think\Controller;
use app\index\model\Staff as StaffModel;
class Staff extends Controller
{
	public function fenye1()
	{
		$config = [
		'type' => 'bootstrap',
		'var_page' => 'page',
		];
		$num = 6;
		$simple = false;
		$paginate = StaffModel::paginate($num, $simple, $config);
		$page = $paginate->render();
		$this->view->assign('staffs', $paginate);
		$this->view->assign('page', $page);
		return $this->view->fetch('moban3');
	}
}

3、新建视图文件moban3.html：

{load href="/static/bootstrap/css/bootstrap.css" /}
<div class="container">
	<div class="row">
		<h3 class="text-center">员工信息登记录-3</h3>
		<div class="col-md-8 col-md-offset-2">
			<table class="table table-bordered table-hover text-center">
				<tr class="info">
					<td>ID</td>
					<td>姓名</td>
					<td>性别</td>
					<td>年龄</td>
					<td>工资</td>
				</tr>
				{foreach $staffs as $staff}
				<tr>
					<td>{$staff.staff_id}</td>
					<td>{$staff.name}</td>
					<td>{$staff.sex}</td>
					<td>{$staff.age}</td>
					<td>{$staff.salary}</td>					
				</tr>
				{/foreach}
			</table>
			<div class="text-center">{$page|raw}</div>
		</div>
	</div>
</div>
{load href="/static/jquery/jquery-3.3.1.js" /}
{load href="/static/bootstrap/js/bootstrap.js" /}

测试：

输入地址：http://www.tp51.io/index.php/index/staff/fenye1

结果：

二、volist标签实现模板数据分页显示

1、同上

2、在控制器Staff.php新增fenye2()方法，代码如下：

        public function fenye2()
	{
		$config = [
		'type' => 'bootstrap',
		'var_page' => 'page',
		];
		$num = 6;
		$simple = false;
		$paginate = StaffModel::paginate($num, $simple, $config);
		$page = $paginate->render();
		$this->view->assign('staffs', $paginate);
		$this->view->assign('page', $page);
		return $this->view->fetch('moban4');
	}

3、新建视图文件moban4.html：

{load href="/static/bootstrap/css/bootstrap.css" /}
<div class="container">
	<div class="row">
		<h3 class="text-center">员工信息登记录-4</h3>
		<div class="col-md-8 col-md-offset-2">
			<table class="table table-bordered table-hover text-center">
				<tr class="info">
					<td>ID</td>
					<td>姓名</td>
					<td>性别</td>
					<td>年龄</td>
					<td>工资</td>
				</tr>
				{empty name="staffs"}
				<h3 style="color: red;">当前没有符合条件的数据,请检查~~</h3>
				{else /}
				{volist name="staffs" id="staff"}
					<tr>
						<td>{$staff.staff_id}</td>
						<td>{$staff.name}</td>
						<td>{$staff.sex}</td>
						<td>{$staff.age}</td>
						<td>{$staff.salary}</td>
					</tr>
				{/volist}
				{/empty}
			</table>
			<div class="text-center">{$page|raw}</div>
		</div>
	</div>
</div>
{load href="/static/jquery/jquery-3.3.1.js" /}
{load href="/static/bootstrap/js/bootstrap.js" /}

测试：

输入地址：http://www.tp51.io/index.php/index/staff/fenye2

结果：