> 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
~~~
此時當我們點擊各個頁碼的時候，都會觸發一個 異步請求，并發送當前的頁碼到后臺。這個是不是跟我們同步請求類似啊：
