Laravel-AJAX-分页
public function show(Request $request){
$posts = DB::table('posts')
->join('cate','posts.cate_id','=','cate.c_id')
->get();
$count = count($posts);//获取总记录数(你也可以获取带条件总数)
$page = $request['page']??1; //获取当前页
$size = 2; //每页显示条数
//求总页数
$sums = ceil($count/$size);
//设置上一页 下一页
$prev = ($page-1)>0?$page-1:1;
$next = ($page+1)<$sums?$page+1:$sums;
//偏移量
$offset = ($page-1) * $size;
//文章数据
$posts = DB::table('posts')
->join('cate','posts.cate_id','=','cate.c_id')
->offset($offset)
->limit($size)
->get();
$data['post'] = $posts;
$data['sums'] = $sums;
$data['prev'] = $prev;
$data['next'] = $next;
//如果是ajax请求就返回json格式数据，否则就展示列表页面
if($request->ajax()){
return response()->json($data);
}else{
return view('admin.posts.show',compact('posts','sums','prev','next'));
}
}
二.页面
@extends('layouts.main')
@section('content')
<body>
<div id="body">
<ol class="breadcrumb">
<li class="active"><a href="#">系统</a></li>
<li>文档</li>
</ol>
<div class="tablebox">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th class="text-center" width="50"><input type="checkbox" id="check5-all" name="check5-all">
</th>
<th class="text-center">ID</th>
<th>标题</th>
<th>图片</th>
<th>所属栏目</th>
<th>状态</th>
<th>赞</th>
<th>浏览量</th>
<th>评论量</th>
<th>发布日期</th>
<th class="cell-small text-center"><i class="fa fa-bolt"></i> 操作</th>
</tr>
</thead>
<tbody id="box">
@foreach($posts as $key=>$val)
<tr>
<td class="text-center"><input type="checkbox" id="check5-td1" name="check5-td1"></td>
<td class="cell-small text-center">{{$val->id}}</td>
<td><a href="javascript:void(0)">{{$val->title}}</a></td>
<td><img src="{{$val->img}}" width="60px" height="60px"/></td>
<td>{{$val->c_name}}</td>
<td>
@if($val->status == 1)
<span class="label label-success">正常</span>
@elseif($val->status == 2)
<span class="label label-success">未审核</span>
@else
<span class="label label-success">其他</span>
@endif
</td>
<td>{{$val->zan}}</td>
<td>{{$val->views}}</td>
<td>{{$val->comment}}</td>
<td>{{date('Y-m-d H:i:s',$val->addtime)}}</td>
<td class="text-center">
<div class="btn-group">
<a href="javascript:void(0)" class="btn btn-xs btn-info" data-toggle="tooltip"
data-placement="top" title="前台预览"><i class="fa fa-info-circle"></i></a>
<a href="javascript:void(0)" class="btn btn-xs btn-success" data-toggle="tooltip"
data-placement="top" title="修改"><i class="fa fa-pencil"></i></a>
<a href="javascript:;" class="btn btn-xs btn-danger delbtn" data-toggle="tooltip"
data-placement="top" title="删除"><i class="fa fa-trash-o"></i></a>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="fy">
<ul class="pagination">
<li>
<a href="javascript:void(0)" onclick="page(1)">首页</a>
</li>
<li>
<a href="javascript:void(0)" onclick="page({{$prev}})" id="up">上一页</a>
</li>
@for($i=1;$i<=$sums;$i++)
<li><a href="javascript:void(0)" onclick="page({{$i}})">{{$i}}</a></li>
@endfor
<li>
<a href="javascript:void(0)" onclick="page({{$next}})" id="down">下一页</a>
</li>
<li>
<a href="javascript:void(0)" onclick="page({{$sums}})">尾页</a>
</li>
</ul>
</div>
</div>
</body>
@endsection
三.JS
<script>
function page(page) {
$.ajax({
type:"get",
url:"http://www.blog1904a.com/posts/show?page="+page,
dataType:'json',
success:function(res){
var str = '';
var data = res.post;
$(data).each(function (k,v) {
//console.log(v.title);
str+= '<tr>';
str+= '<td></td>';
str+= '<td>'+v.id+'</td>';
str+= '<td>'+v.title+'</td>';
str+= '<td><img src='+v.img+' height="60px" width="60px"/></td>';
str+= '<td>'+v.c_name+'</td>';
if(v.status == 1){
str+= '<td>通过</td>';
}else{
str+= '<td>未审核</td>';
}
str+= '<td>'+v.zan+'</td>';
str+= '<td>'+v.comment+'</td>';
str+= '<td>'+v.views+'</td>';
str+= '<td>'+v.addtime+'</td>';
str+= '</tr>';
});
$("#box").html(str);
$("#up").attr({onclick:"page("+res.prev+")"});
$("#down").attr({onclick:"page("+res.next+")"});
}
})
}
</script>
AJAX 模型无刷新分页
路由：
Route::group(['namespace'=>'Task'],function (){
Route::get('task13/index','task13\WorkController@index')->name('task13.index');
});
laravel 控制器：
public function index(Request $request)
{
$posts = Task13::get();
$count = count($posts);//获取总记录数(你也可以获取带条件总数)
$page = $request['page']??1; //获取当前页
$size = 2; //每页显示条数
//求总页数
$sums = ceil($count/$size);
//设置上一页 下一页
$prev = ($page-1)>0?$page-1:1;
$next = ($page+1)<$sums?$page+1:$sums;
//偏移量
$offset = ($page-1) * $size;
$posts = Task13 ::offset($offset)->limit($size)->get();
$data['post'] = $posts;
$data['sums'] = $sums;
$data['prev'] = $prev;
$data['next'] = $next;
//如果是ajax请求就返回json格式数据，否则就展示列表页面
if($request->ajax()){
return response()->json($data);
}else{
return view('task.task13.index',compact('posts','sums','prev','next'));
}
}
HTML页面
<div class="fy">
<ul class="pagination">
<li>
<a href="javascript:void(0)" onclick="page(1)">首页</a>
</li>
<li>
<a href="javascript:void(0)" onclick="page({{$prev}})" id="up">上一页</a>
</li>
@for($i=1;$i<=$sums;$i++)
<li><a href="javascript:void(0)" onclick="page({{$i}})">{{$i}}</a></li>
@endfor
<li>
<a href="javascript:void(0)" onclick="page({{$next}})" id="down">下一页</a>
</li>
<li>
<a href="javascript:void(0)" onclick="page({{$sums}})">尾页</a>
</li>
</ul>
</div>
{{-- {{$data->appends(request()->except('page'))->links()}}--}}
{{-- {{$data->links()}}--}}
</div>
</div>
// ajax分页
function page(page) {
$.ajax({
type:"get",
url:"http://www.yan.com/task13/index?page="+page,
dataType:'json',
success:function(res){ var str = '';
var data = res.post;
$(data).each(function (k,v) {
//console.log(v.title);
str+= '<tr>';
str+= '<td><input type="checkbox" value="{{$item->id}}" name="id[]"></td>';
str+= '<td>'+v.id+'</td>';
str+= '<td>'+v.id+'</td>';
str+= '<td>'+v.time+'</td>';
str+= '<td>'+v.order+'</td>';
str+= '<td>'+v.name+'</td>';
str+= '<td>'+v.code+'</td>';
str+= '<td>'+v.source+'</td>';
str+= '<td>'+v.type+'</td>';
str+= '<td>'+v.cost_type+'</td>';
str+= '<td>'+v.pay+'</td>';
str+= '<td>'+v.payment+'</td>';
if(v.status == 1){
str+= '<td>通过</td>';
}else{
str+= '<td>未审核</td>';
}
str+= '</tr>';
});
$("#box").html(str);
$("#up").attr({onclick:"page("+res.prev+")"});
$("#down").attr({onclick:"page("+res.next+")"});
}
})
}
Laravel-AJAX-分页的更多相关文章
- laravel——ajax分页&删除&搜索
一.视图代码 /*搜索*/<form action="javascript:search_brand()" name="searchForm"> & ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- yii2的分页和ajax分页
要想使用Yii分页类第一步:在控制器层加载分页类 use yii\data\Pagination;第二步: 使用model层查询数据,并用分分页,限制每页的显示条数$data = User::find ...
- [js开源组件开发]ajax分页组件
ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...
- MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
- MVC - 11（下）jquery.tmpl.js +ajax分页
继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...
- laraver ajax分页
,设置分页容器参考laraver手册 我的设置代码如下: ,控制器调用的方法:代码如下 ); include($path); $content = ob_get_cle ...
- PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 **** ...
- PHP+jQuery 列表分页类 ( 支持 url 分页 / ajax 分页 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8.3.mi ...
随机推荐
- 抓包神器 tcpdump 使用介绍 (转)
tcpdump 命令使用简介 简单介绍 tcpdump 是一款强大的网络抓包工具,运行在 linux 平台上.熟悉 tcpdump 的使用能够帮助你分析.调试网络数据. 要想使用很好地掌握 tcpdu ...
- 对战平台虚拟War3局域网的原理对战平台虚拟War3局域网的原理
转载请注明来源:https://www.cnblogs.com/hookjc/ 以War3为例,启动魔兽后,首先是如何看见主机的问题:魔兽是通过TCP/UDP协议进行数据发送的,那如何实现看到对方?我 ...
- Java中线程的状态及其转化
线程状态转化图: 说明: 线程总共包括以下5种状态. 1.新状态New:该状态也叫新建状态,当线程对象被创建后,线程就进入了新建状态.例如:Thread thread = new Thread();. ...
- endl与\n的区别
看C++Primer的时候看到的,然后去百度了一下: 比较明白的解释: 1.区别在于: \n只代表换行的转义字符 endl除了代表换行,还紧跟着清出缓冲槽 2.接下来我们看一下具体内容的辨析: 要明白 ...
- iOS开发笔记，简单实现视频音频的边下边播
总是在网上看别人的博文,受益匪浅,从没自己写过,今天分享一点小经验,第一次写技术博客,希望对同行的ios猿们有所帮助. 先介绍一下自己的情况:一年ios开发,http协议不太懂,大约知道断点下载h ...
- K8s二进制部署单节点 etcd集群，flannel网络配置 ——锥刺股
K8s 二进制部署单节点 master --锥刺股 k8s集群搭建: etcd集群 flannel网络插件 搭建master组件 搭建node组件 1.部署etcd集群 2.Flannel 网络 ...
- 网管必须必须知道的知识！ARP攻击与欺骗的原理！
ARP攻击与ARP欺骗原理及应用 1.ARP概述以及攻击原理 2.ARP欺骗原理 3.ARP故障处理 1.什么是ARP协议?将一个已知的IP地址解析成MAC地址.无论是ARP攻击还是ARP欺骗,它们都 ...
- 分配IP地址的好东西 DHCP以及NAT简单介绍
主机配置协议DHCP 1.DHCP应用场景 2.DHCP基础原理 3.NAT简单介绍 4.配置命令 1.手工配置IP地址,工作量比较大而且不好管理,如果用户自己修改参数,可能会导致ip地址冲突,这个时 ...
- 交换机基本原理与VRP基础及操作
交换机基本原理与VRP基础及操作 目录 交换机基本原理与VRP基础及操作 一.数据链路层 1.数据链路层的位置 2.数据链路层的功能 二.以太网(Ethernet) 1.以太网的概念 2.MAC地址( ...
- 解决OpenOCD烧录STM32失败, 无法通过SWD连接的问题
OpenOCD烧录STM32失败的问题 Linux下使用 OpenOCD 烧录 STM32, 出现了 Error: init mode failed (unable to connect to the ...