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 ...

随机推荐

X000001
一些相互无关联的题目的集合都是码量不大,略有思维难度的题做起来还是很舒适的 P6312 [PA2018]Palindrom 空间限制很小,不足以存下整个字符串,故暴力判断不可行. 考虑使用字符串哈 ...
Java里的new
java里的new的英文意思就是"新的"的意思.在JAVA里就是创建一个新的实例,或者说一个新的对象,一个普通类在没有实例化之前,就是new之前,它的属性,方法等等在内存中都是不存 ...
OC和JS代码的互调
01 OC调用JS的代码 NSString *str = [self.webView stringByEvaluatingJavaScriptFromString:@"sum()" ...
copy与内存管理
1.copy与内存管理浅拷贝原对象引用计数器+1 必须对原对象进行释放 char *cstr = "this is a c string"; NSString *str1 = ...
[杭电新生赛]hgame-week1-web-wp
hgame第一周总结 (官方wp更加简洁明了.直入主题,个人比较菜,所以过程繁琐写好了一直没发qwq(就是懒(bushi) 一.Tetris plus! 题目里说玩到3000分就给flag,还真有点 ...
netty系列之:让TCP连接快一点,再快一点
简介经典的TCP三次握手大家应该很熟悉了,三次握手按道理说应该是最优的方案了,当然这是对于通用的情况来说的.那么在某些特殊的情况下是不是可以提升TCP建立连接的速度呢? 答案是肯定的,这就是今天我们 ...
P2678 [NOIP2015 提高组] 跳石头
#include<bits/stdc++.h> using namespace std; int l,n,m,a[100010];//与起点的距离 bool check(int d) { ...
ubuntu关机和重启
本博客旨在自我学习使用,如有任何疑问请及时联系博主 linux下常用的关机命令有:shutdown.halt.poweroff.init:重启命令有:reboot.下面本文就主要介绍一些常用的关机命令 ...
Nginx-反向代理服务器
概述 Nginx是一款轻量级的Web服务器.反向代理服务器,由于它的内存占用少,启动极快,高并发能力强,在互联网项目中广泛应用. 优点 nginx是多进程的,不会出现并发问题,不用加锁.一个进程出问题 ...
shell切割nginx日志
用linux自带的计划任务切割nginx日志,每天0点执行 #!/bin/bash #GuoYabin nginxpid=`/bin/ps aux|grep nginx |awk /master/'{ ...

Laravel-AJAX-分页

Laravel-AJAX-分页的更多相关文章

随机推荐

热门专题