layui框架分页设置详解(2)-木庄网络博客

17、最终的html代码如下：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
 
<body>
    <table id="demo" lay-filter="test"></table>
    <script src="./layui/layui.js"></script>
    <script>
        layui.use('table', function () {
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#demo'
                , url: 'http://localhost/php/public/index.php/index/index/index' //数据接口
                , method: 'post'
                , page: true //开启分页
                , limit: 3
                , limits: [2, 3, 5]
                , cols: [[
                    { width: 80, type: 'checkbox' },
                    { field: 'type_id', width: 80, title: 'ID', sort: true },
                    { field: 'type_name', title: '分类名称', sort: true }
                ]],
                parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                },
                request: {
                    pageName: 'page' // 页码的参数名称，默认：page
                    , limitName: 'size' //每页数据量的参数名，默认：limit
                },
            });
        });
    </script>
</body>
 
</html>

18、接口使用的TP5.0 没有使用模型层、具体简单代码如下：

<?php
 
namespace app\index\controller;
 
use think\Controller;
use think\Db;
use think\Request;
 
class Index extends Controller
{
    public function index()
    {
        $size = Request::instance()->post( 'size', 3 );
        $page = Request::instance()->post( 'page', 1 );
        $res = Db::table( 'goods_type' )->paginate( $size, false, [ 'page'=> $page] );
        $arr['code'] = 0;
        $arr['msg'] = 'ok';
        $arr['data'] = $res;
        return json( $arr );
    }
}
?>