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