第一步:导入类
下载AjaxPage.class.php
我这里的提供的是之前3.1时候用的,在3.2用的时候需要在类里面加个命名空间
文章图片
Paste_Image.png
这个类放在
ThinkPHP
-
Library
-
Org
-
Util
路径下
文章图片
Paste_Image.png
第二步:php里该写的代码
【ThinkPHP3.2分页显示|ThinkPHP3.2分页显示,超详细,超简单】ProductController
是我建的产品类
class ProductController extends PublicController{public function index()
{
//导入三方库// 查询满足要求的总记录数
$count = $this->model->count();
//创建对象,指定对象执行的方法
$Page = new \Org\Util\AjaxPage($count,7,"productPage");
//productPage是调用js中方法,通过该方法给js传递页码值,7代表一页显示7条数据// 实例化分页类 传入总记录数和每页显示的记录数
$show = $Page->show();
// 分页显示输出
// 进行分页数据查询 注意limit方法的参数要使用Page类的属性
$list = $this->model->order('id asc')->limit($Page->firstRow.','.$Page->listRows)->select();
//判断是不是ajax,
if (!IS_AJAX){$this->assign('result',$list);
// 赋值数据集
$this->assign('page',$show);
// 赋值分页输出
$this->view();
// 输出模板}else{$data['result']=$list;
$data['page'] = $show;
$this->ajaxReturn($data);
}
}//编辑产品
public function edit(){//进入编辑页面,显示待编辑的信息
if (!empty($_GET)){
$result = $this->model->where($_GET)->find();
$this->assign('result',$result);
}
//编辑完提交,保存,跳转回首页
if (!empty($_POST)){$id = $_POST['id'];
$result = $this->model->where("id=$id")->save($_POST);
//0表示保存失败
if ($result != 0){
redirect('index');
}
}
$this->view();
}//删除产品
public function delete(){$id = $_GET['id'];
$result = $this->model->where("id=$id")->delete();
if ($result != 0){
$this->redirect('index');
}
}
}
文章图片
3.2的写法
文章图片
3.1的写法
文章图片
page输出显示是这样的
文章图片
result输出显示是这样的 第三步:html该写的代码,把assign过来的数据赋值到td上
文章图片
下面是对应的代码
NO
产品名称
单价
备注
操作
{$val.no}
{$val.pro_name}
{$val.price}
{$val.remark}
{$page}
解释下关键代码:
这里设置个id,在js里面会用到
第四步:完成前三步,首页的信息肯定可以显示出来了,但是点击页码没有反应,这时候,我们需要在js里面请求新的数据
foreach为tp的标签,遍历数组用的,
name
对应数据源,item
是循环变量edit是写在js里的方法,根据id编辑内容
del是写在js里的方法,根据id删除内容
{$page}
{$page}是显示1,2,3分页码的,这个class类后面js会用到
解释下关键代码:
function productPage(id) {
这是我们php代码$Page = new \Org\Util\AjaxPage($count,7,"productPage")
里的方法建议初学者看清楚博客里代码的每个注释,还有图片下的文字.
url = '__APP__/home/product/index/p/'+id;
p参数为页码,//var data = https://www.it610.com/article/eval('('+content+')'); //强制将json转成对象类型
这里是注释,没错.建议在这步alert一下content,看看有没有数据,没有就打开这段代码试试.
原创博客,转载请注明出处!
推荐阅读