layui异步分页的使用

本文阅读 1 分钟
首页 前端笔记 正文
<!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>
解压密码: detechn或detechn.com

免责声明

本站所有资源出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。

本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户自行鉴别,做一个有主见和判断力的用户。

本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。

[前端笔记]HTTP状态码及其含义
« 上一篇 06-10
Photon – 基于 aria2支持 磁力链、BT 和 Metalink v0.2.2
下一篇 » 06-13

发表评论