layui异步分页的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<input type="text" name="search" placeholder="search" id="search">
<button id="btn">搜索</button>
<br>
<ul id="display_data">

</ul>
<div id="test1"></div>
<script>
    $('#btn').on('click', function () {
        location.href = '/table/page/?kw=' + $('#search').val()
    })
</script>

<script>
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
        var context = "";
        if (r != null)
            context = r[2];
        reg = null;
        r = null;
        return context == null || context == "" || context == "undefined" ? "" : context;
    }
    var kw = GetQueryString('kw');
    function get_per_page(obj, kw) {
        var url = '';
        if (kw) {
            url = '/table/asyncfenye/?page=' + obj.curr + '&limit=' + obj.limit + '&kw=' + kw
        } else {
            url = '/table/asyncfenye/?page=' + obj.curr + '&limit=' + obj.limit
        }
        $.get(
            url,
            function (resp) {
                $('#display_data').empty();
                $.each(resp.data, function (i, item) {
                    var li_elem = '<li>' + item.job_name + '</li>';
                    $('#display_data').append(li_elem)
                })
            }
        )
    }
    function laypage_render(laypage, kw) {
        laypage.render({
            elem: 'test1'
            , count: {{ count }} //数据总数，从服务端得到
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                if (first) {
                    get_per_page(obj, kw)
                }
                //非初始加载
                if (!first) {
                    get_per_page(obj, kw)
                }
            }
        });
    }
    layui.use('laypage', function () {
        var laypage = layui.laypage;
        if (kw) {
            laypage_render(laypage, kw);
        } else {
            laypage_render(laypage);
        }
    });

</script>
</body>
</html>
当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »