使用layUI分页ajax数据,way.js数据双向绑定

最新推荐文章于 2024-07-22 10:36:52 发布

HD2killers

最新推荐文章于 2024-07-22 10:36:52 发布

阅读量968

点赞数

分类专栏： php thinkphp5

本文链接：https://blog.csdn.net/HD2killers/article/details/81258864

版权

php 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

thinkphp5

49 篇文章 0 订阅

订阅专栏

way.js数据双向绑定
github

前端

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/layui23/css/layui.css">
    <script type="text/javascript" src="__STATIC__/layui23/layui.js"></script>
    <script type="text/javascript" src="__STATIC__/layui23/way.js"></script>
</head>

<body>
    <div id="pagedata">
        <div way-repeat="some_list">
            $$key - <span way-data="cat_id"></span>
        </div>
    </div>
    <div id="paginate">
    </div>
    <script>
    layui.use(['laypage', 'jquery'], function() {
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'paginate',
            count: "{$count}",
            limit: 20,
            limits: [10, 20, 30, 40, 50],
            jump: function(obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数
                //首次不执行
                if (!first) {
                    //do something
                }
                ajax_get_data(obj.curr, obj.limit);
            }
        });

        function ajax_get_data(p, p_n) {
            layui.$.ajax({ // 使用layui模块化加载jquery：layui.$.
                url: "{:url('index_data')}",
                type: 'POST',
                dataType: 'json',
                data: {
                    p: p,
                    p_n: p_n,
                },
                complete: function(xhr, textStatus) {
                    //called when complete
                },
                success: function(data, textStatus, xhr) {
                    way.set("some_list", data.data.list);
                },
                error: function(xhr, textStatus, errorThrown) {
                    //called when there is an error
                }
            });

        }
    });
    </script>
</body>

</html>

后端

    public function index()
    {
        $count = Db::table('tp_goods')->count();
        $this->assign('count', $count);
        return view();
    }
    public function index_data()
    {
        $p        = input('p') ?? 1;
        $p_n      = input('p_n') ?? config('paginate.list_rows');
        $list     = Db::table('tp_goods')->order('goods_id ASC')->limit(($p - 1) * $p_n, $p_n)->select();
        $count    = Db::table('tp_goods')->count();
        $all_page = ceil($count / $p_n);
        $data     = [
            'p'        => $p,
            'p_n'      => $p_n,
            'count'    => $count,
            'all_page' => $all_page,
            'list'     => $list,
        ];
        return json(['code' => 0, 'msg' => '加载成功！', 'data' => $data]);
    }