码迷,mamicode.com
首页 > Web开发 > 详细

laravel框架实现ajax分页

时间:2019-06-12 11:03:11      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:sha   sel   效果   ajax   code   fun   就是   har   off   

1、控制器层
/**
* AJAX分页
*/
public function page()
{
//查询数据库总条数
$count = count(Db::table(‘goods‘)->get());
//设置每页显示条数
$rev = "4";
//求总页数
$sums = ceil($count/$rev);
//求当前页
$page = Input::get(‘page‘);
if(empty($page)){
$page = "1";
}
//设置上一页 下一页
$prev = ($page-1)>0?$page-1:1;
$next = ($page+1)<$sums?$page+1:$sums;
//求偏移量
$offset = ($page-1)*$rev;
//sql 查询数据库
$data = DB::select("select * from goods limit $offset,$rev");
return view(‘show.page‘,[‘data‘=>$data,‘prev‘=>$prev,‘next‘=>$next,‘sums‘=>$sums,‘page‘=>$page]);
}

2、视图层 page.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="box" align="center">

<table border="1">
<tr>
<td>产品名称</td>
<td>产品单价</td>
<td>产品库存</td>
</tr>
@foreach($data as $val)
<tr>
<td>{{$val->name}}</td>
<td>{{$val->price}}</td>
<td>{{$val->store}}</td>
</tr>
@endforeach

</table>
<a href="javascript:void(0)" onclick="page(1)">首页</a>
<a href="javascript:void(0)" onclick="page(<?php echo $prev ?>)">上一页</a>
<a href="javascript:void(0)" onclick="page(<?php echo $next ?>)">下一页</a>
<a href="javascript:void(0)" onclick="page(<?php echo $sums ?>)">尾页</a>
</div>
</body>
</html>
<script>
function page(page) {
$.ajax({
type:"get",
url:"page",
data:{page:page},
success:function(msg){
if(msg){
$("#box").html(msg)
}
}
})
}

</script>

技术图片

效果就是这样
结束。

laravel框架实现ajax分页

标签:sha   sel   效果   ajax   code   fun   就是   har   off   

原文地址:https://www.cnblogs.com/dream98/p/11007981.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!