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-分页的更多相关文章

  1. laravel——ajax分页&删除&搜索

    一.视图代码 /*搜索*/<form action="javascript:search_brand()" name="searchForm"> & ...

  2. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  3. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  4. yii2的分页和ajax分页

    要想使用Yii分页类第一步:在控制器层加载分页类 use yii\data\Pagination;第二步: 使用model层查询数据,并用分分页,限制每页的显示条数$data = User::find ...

  5. [js开源组件开发]ajax分页组件

    ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...

  6. MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

    该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...

  7. MVC - 11（下）jquery.tmpl.js +ajax分页

    继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...

  8. laraver ajax分页

    ,设置分页容器参考laraver手册 我的设置代码如下: ,控制器调用的方法:代码如下 );         include($path);         $content = ob_get_cle ...

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

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

随机推荐

  1. 趁着同事玩游戏偷偷认识k8s一家子补补课

    趁着同事玩偷偷认识k8s一家子补补课 Kubernetes集群这个大家庭在容器化时代能够新军崛起,要感谢其众多可靠稳定,工作认真负责的优质成员. 这些兄弟姐妹们为集群提供故障转移和高可用性,保证k8s ...

  2. JS创建快捷方式

    转载请注明来源:https://www.cnblogs.com/hookjc/ <script type="text/javascript" language="j ...

  3. Linux性能优化实战（二）

    一.CPU使用率过高 1,CPU使用率 a>节拍率 为了维护CPU时间,Linux通过事先定义的节拍率(内核中表示为HZ),触发时间中断,并使用全局变量Jiffies记录开机以来的节拍数.每发生 ...

  4. C# 不区分大小写替换文本

    C# .NET类库自带的str.Replace() 方法替换文本不能区分大小写.我们可以自己编写一个扩展方法,支持文本忽略大小写替换.以下扩展方法实现了使用正则表达式忽略大小写替换文本. public ...

  5. [LeetCode]66.加一（Java）

    原题地址: plus-one 题目描述: 给定一个由 整数 组成的 非空 数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储单个数字. 你可以假设除了整数 ...

  6. 超详细的Cookie增删改查

    目录 1,什么是 Cookie? 1.1,存储形式 1.2,常用属性 1.3,大小限制 2,增 or 改Cookie 3,查Cookie 4,删Cookie 1,什么是 Cookie? Cookie是 ...

  7. 轻量级DI框架Guice使用详解

    背景 在日常写一些小工具或者小项目的时候,有依赖管理和依赖注入的需求,但是Spring(Boot)体系作为DI框架过于重量级,于是需要调研一款微型的DI框架.Guice是Google出品的一款轻量级的 ...

  8. DotNet Dictionary 实现简介

    一:前言 本来笔者对DotNet的Hashtable及Dictionary认识一直集中在使用上,一个直接用object 一个可以用泛型,以前也只大概看过Hashtable的实现.最近查MSDN时发现有 ...

  9. Windows禁用445端口

    今天来公司有好多电脑感染了0day病毒, 写个脚本,一键执行禁用445,135-139端口.Windows7测试没有问题. reg add "HKEY_LOCAL_MACHINE\SYSTE ...

  10. scanf坑我的那些年

    scanf函数作为用户输入指令给计算机的一种输入方法,它的使用有如下几被坑点: scanf用法:#include<stdio.h>;scanf("格式控制符",地址表列 ...