第一步:导入类
下载AjaxPage.class.php
我这里的提供的是之前3.1时候用的,在3.2用的时候需要在类里面加个命名空间
Paste_Image.png
这个类放在
ThinkPHP- Library-Org-Util路径下
Paste_Image.png
第二步:php里该写的代码
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上
下面是对应的代码
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>NO</th>
<th>产品名称</th>
<th>单价</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody id="neirong">
<foreach name="result" item="val">
<tr class="cen">
<td>{$val.no}</td>
<td><a href="#">{$val.pro_name}</a></td>
<td>{$val.price}</td>
<td>{$val.remark}</td>
<td>
<button class="btn btn-primary" onclick="edit({$val.id})">编辑</button>
<button class="btn btn-danger" onclick="del({$val.id})">删除</button>
</td>
</tr>
</foreach>
</tbody>
</table>
<div class="panel panel-default">
<div class="panel-bd">
<div class="pagination">{$page}</div>
</div>
</div>
解释下关键代码:
<tbody id="neirong">这里设置个id,在js里面会用到
-
<foreach name="result" item="val">foreach为tp的标签,遍历数组用的,name对应数据源,item是循环变量 -
<button class="btn btn-primary" onclick="edit({$val.id})">编辑</button>edit是写在js里的方法,根据id编辑内容 -
<button class="btn btn-danger" onclick="del({$val.id})">删除</button>del是写在js里的方法,根据id删除内容 -
<div class="pagination">{$page}</div>{$page}是显示1,2,3分页码的,这个class类后面js会用到
第四步:完成前三步,首页的信息肯定可以显示出来了,但是点击页码没有反应,这时候,我们需要在js里面请求新的数据
<script>
//点击页码,重新请求数据
function productPage(id) {
var url = '';
url = '__APP__/home/product/index/p/'+id;
$.get(url,function (content) {
//重写html代码
//将pagination div重写一遍
//将json转成对象类型
//var data = eval('('+content+')'); //强制将json转成对象类型
var data = content;
//输出页码
$('.pagination').html(data.page);
var l = '';
for (var i = 0; i < data.result.length; i++){
l += '<tr class="cen">';
l += '<td>'+ data.result[i].no +'</td>';
l += '<td>'+ data.result[i].pro_name +'</td>';
l += '<td>'+ data.result[i].price +'</td>';
l += '<td>'+ data.result[i].remake +'</td>';
l += '<td><button class="btn btn-primary" onclick="edit('+ data.result[i].id +')">编辑</button><button class="btn btn-danger" onclick="del('+ data.result[i].id +')">删除</button></td>';
l += '</tr>';
}
//重新输出整个表格
$('#neirong').html(l);
});
}
//点击编辑按钮
function edit(id) {
window.location.href='__APP__/home/product/edit/id/'+id;
}
//点击删除按钮
function del(id) {
if(confirm("您确定要删除么!")){
window.location.href='__APP__/home/product/delete/id/'+id;
}
}
</script>
解释下关键代码:
function productPage(id) {这是我们php代码$Page = new \Org\Util\AjaxPage($count,7,"productPage")里的方法
-
url = '__APP__/home/product/index/p/'+id;p参数为页码, -
//var data = eval('('+content+')'); //强制将json转成对象类型这里是注释,没错.建议在这步alert一下content,看看有没有数据,没有就打开这段代码试试.
