> layPage是一款多功能的js分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载，并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。
看完这些官方的解释之后，让我来直接拿一个直观的例子，让你对这款插件的应用有个大致的了解吧。首先，我们在 index\\controller 下面新建一个 Tools.php，在其中新建一个 layPage 方法：
~~~
<?php
namespace app\index\controller;
use think\Controller;
class Tools extends Controller
{
// laypage 分页插件演示
public function layPage()
{
if(request()->isAjax()){
}
return $this->fetch();
}
}
~~~
这个方法方便我们渲染一个页面，来方便演示后面的功能。
**下载 laypage 插件：**
进入 layepage 的[laypage 官网](http://www.layui.com/laypage/)点击下载插件。然后加压出一个叫 laypage 的文件加，把他放入 public\\static 下面：
下面我来看一下，页面渲染部分应该做哪些工作。我们在 application\\index\\view 下面新建一个 tools 文件夹，并在其中新建一个laypage.html：
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>laypage插件的应用</title>
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="view"></div> <!-- 内容显示部分 -->
<div id="page"></div> <!-- 分页码显示部分 -->
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/laypage/laypage.js"></script>
<script>
//以下将以jquery.ajax为例，演示一个异步分页
function demo(curr){
$.getJSON("{:url('tools /laypage')}", {
page: curr || 1 //向服务端传的参数，此处只是演示
}, function(res){
//此处仅仅是为了演示变化的内容
var demoContent = (new Date().getTime()/Math.random()/1000)|0;
document.getElementById('view').innerHTML = res.content + demoContent;
//显示分页
laypage({
cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
pages: res.pages, //通过后台拿到的总页数
curr: curr || 1, //当前页
jump: function(obj, first){ //触发分页后的回调
if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
demo(obj.curr);
}
}
});
});
};
//运行
demo();
</script>
</body>
</html>
~~~
拿了官方最实用的例子作为讲解，此处的数据 我们用模拟的数据来展示，由案例可见，这里面的数据是向一个 id=view 的dom元素中渲染这些数据。
~~~
//此处仅仅是为了演示变化的内容
var demoContent = (new Date().getTime()/Math.random()/1000)|0;
document.getElementById('view').innerHTML = res.content + demoContent;
~~~
> 先以模拟的数据做展示，后面再讲解真实的数据该怎么处理。
接下来，跟着我一行一行的来理解这这段代码：
1. 首先，我们通过向 tools /laypage 发送一个 异步请求，并且传递当前的 page 页码为 1
2. 得到正确的回调之后，处理接下来的逻辑。
~~~
//显示分页
laypage({
cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
pages: res.pages, //通过后台拿到的总页数
curr: curr || 1, //当前页
jump: function(obj, first){ //触发分页后的回调
if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
demo(obj.curr);
}
}
});
~~~
显示分页，通过的是 laypage 方法。
**count**： 此处填写你要将页面渲染到哪里的容器。例如，本例子是将其 渲染到 id=page 的div。因此本处填写 page
**pages**: 填写获取的总页数，因此我们的接口 tools /laypage 应该返回 总页数 信息。
**curr**: 点击的当前页码。没特殊情况不需要做什么修改 只要按照 curr || 1, 填写即可。记住此处的 curr 变量根据 你的方法传入值而改变。demo(curr) ，此处我们 demo 传入的是 curr 表示当前页码。
**jump**： 点击页码执行的操作，此处可见，点击页码之后，我们再次调用 demo 即自身，并传入当前点击的页码。类似于递归的处理办法。
好了，修改一下，我们接口部分，让他在页面中跑起来吧。
~~~
// laypage 分页插件演示
public function layPage()
{
if(request()->isAjax()){
// 模拟八页数据
return json(['code' => 1, 'pages' => 8, 'content' => '模拟数据']);
}
return $this->fetch();
}
~~~
我们访问[http://www.phper.com/index/tools/laypage](http://www.phper.com/index/tools/laypage)，就可以得到如下的效果：
> 至于页码的样式，显示多少个页码，是否显示首页 尾页等问题，可以直接参照官网进行配置。非常的简单。
例如想改变页码的样式，只需要在 laypage 这个js 方法的回调中加入一个 skin 的配置项即可。
~~~
skin: 'yahei', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
~~~
此时当我们点击各个页码的时候，都会触发一个 异步请求，并发送当前的页码到后台。这个是不是跟我们同步请求类似啊：
