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> 解压密码： detechn或detechn.com
免责声明
本站所有资源出自互联网收集整理，本站不参与制作，如果侵犯了您的合法权益，请联系本站我们会及时删除。
本站发布资源来源于互联网，可能存在水印或者引流等信息，请用户自行鉴别，做一个有主见和判断力的用户。
本站资源仅供研究、学习交流之用，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担。
