zoukankan      html  css  js  c++  java
  • laravel框架实现ajax分页

    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>

    效果就是这样
    结束。
  • 相关阅读:
    spring IOC
    spring IOC
    自定义UDF,UDTF函数
    vue异步 同步 等待方法执行完毕
    周总结(六)
    周总结(五)
    Downie Mac 网络视频下载工具 v3.9.1
    Sequel pro mysql 图形化工具下载
    让Mac系统读写NTFS Paragon
    framework-plugin 轻量级安卓组件化架构插件
  • 原文地址:https://www.cnblogs.com/dream98/p/11007981.html
Copyright © 2011-2022 走看看