Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 20200123-Laypage的使用-***线上九期班
Blogger Information
Blog 53
fans 3
comment 0
visits 55247
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
20200123-Laypage的使用-***线上九期班
邯郸易住宋至刚
Original
965 people have browsed it

Laypage的使用

一、需要导入静态资源文件

1、导入layui.css

<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" >

2、导入layui.js

<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
##二、指定用于存放页码的div
<div id="demo"></div>
其中的id是一定要有的。
##三、定义方法
<script>
layui.use([‘laypage’, ‘layer’], function(){
var laypage = layui.laypage
,layer = layui.layer;

//总页数低于页码总数
laypage.render({
elem: ‘demo0’
,count: 50 //数据总数
});

//总页数大于页码总数
laypage.render({
elem: ‘demo1’
,count: 70 //数据总数
,jump: function(obj){
console.log(obj)
}
});

//自定义样式
laypage.render({
elem: ‘demo2’
,count: 100
,theme: ‘#1E9FFF’
});
laypage.render({
elem: ‘demo2-1’
,count: 100
,theme: ‘#FF5722’
});
laypage.render({
elem: ‘demo2-2’
,count: 100
,theme: ‘#FFB800’
});

//自定义首页、尾页、上一页、下一页文本
laypage.render({
elem: ‘demo3’
,count: 100
,first: ‘首页’
,last: ‘尾页’
,prev: ‘<em>←</em>‘
,next: ‘<em>→</em>‘
});

//不显示首页尾页
laypage.render({
elem: ‘demo4’
,count: 100
,first: false
,last: false
});

//开启HASH
laypage.render({
elem: ‘demo5’
,count: 500
,curr: location.hash.replace(‘#!fenye=’, ‘’) //获取hash值为fenye的当前页
,hash: ‘fenye’ //自定义hash值
});

//只显示上一页、下一页
laypage.render({
elem: ‘demo6’
,count: 50
,layout: [‘prev’, ‘next’]
,jump: function(obj, first){
if(!first){
layer.msg(‘第 ‘+ obj.curr +’ 页’);
}
}
});

//完整功能
laypage.render({
elem: ‘demo7’
,count: 100
,layout: [‘count’, ‘prev’, ‘page’, ‘next’, ‘limit’, ‘refresh’, ‘skip’]
,jump: function(obj){
console.log(obj)
}
});

//自定义排版
laypage.render({
elem: ‘demo8’
,count: 1000
,layout: [‘limit’, ‘prev’, ‘page’, ‘next’]
});
laypage.render({
elem: ‘demo9’
,count: 1000
,layout: [‘prev’, ‘next’, ‘page’]
});
laypage.render({
elem: ‘demo10’
,count: 1000
,layout: [‘page’, ‘count’]
});

//自定义每页条数的选择项
laypage.render({
elem: ‘demo11’
,count: 1000
,limit: 100
,limits: [100, 300, 500]
});


//将一段数组分页展示

//测试数据
var data = [
‘北京’,
‘上海’,
‘广州’,
‘深圳’,
‘杭州’,
‘长沙’,
‘合肥’,
‘宁夏’,
‘成都’,
‘西安’,
‘南昌’,
‘上饶’,
‘沈阳’,
‘济南’,
‘厦门’,
‘福州’,
‘九江’,
‘宜春’,
‘赣州’,
‘宁波’,
‘绍兴’,
‘无锡’,
‘苏州’,
‘徐州’,
‘东莞’,
‘佛山’,
‘中山’,
‘成都’,
‘武汉’,
‘青岛’,
‘天津’,
‘重庆’,
‘南京’,
‘九江’,
‘澳门’,
‘台北’
];

//调用分页
laypage.render({
elem: ‘demo20’
,count: data.length
,jump: function(obj){
//模拟渲染
document.getElementById(‘biuuu_city_list’).innerHTML = function(){
var arr = []
,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
layui.each(thisData, function(index, item){
arr.push(‘<li>‘+ item +’</li>‘);
});
return arr.join(‘’);
}();
}
});

});
</script>

四、需要注意的问题

目前只是把样式成功引入需要渲染的页面，那些需要渲染的页面还没有搞定。

五、分段用法

1、控制器及方法

  1. #数据 用户列表
  2. public function userList(Request $request){
  3.         $txt = $request->input('searchu');
  4.         $perPage = $request->input('per_num',20); //每页页码
  5.         $query = UserModel::query()->orderBy('created_at', 'desc');
  6.         $result = $query->paginate($perPage);
  7.         $paginator = $result->render();
  8.         $result =  collect($result)->toArray();
  10.         $users = $result['data'];
  11.         $total = $result['total'];//总页码
  12.         $current_page = $result['current_page'];//当前页
  13.         return view('admin.user.userList',compact('users','paginator' ,'total','current_page','perPage'));
  15.     }

2、前端页面

  1. #页面html
  2. <link rel="stylesheet" href="{{ asset('layui/css/layui.css') }}" media="all">
  3. <script src="{{ asset('layui/layui.js') }}"></script>
  4. .............
  5. <tbody>
  6.         @if(!empty($users))
  7.           @foreach($users as $user)
  8.           <tr>
  9.             <td data-id="{{$user['id']}}" onclick="lookforOrder(this)">{{$user['username']}}</td>
  10.             ........
  11.           </tr>
  12.           @endforeach
  13.         @else
  14.           <tr><td colspan="8" style="text-align:center;">- -- >暂无数据< -- -</td></tr>
  15.         @endif
  16.       </tbody>
  17.     </table>
  18.     <div id="userPage" style="float: right">
  19.          {{ $paginator }}  //分页
  20.     </div>
  21.   </div>

3、JS脚本

  1. #js
  2. <script>
  3.   layui.use(['element', 'layer','laypage'], function(){
  4.     var element = layui.element;
  5.     var layer = layui.layer;
  6.     var laypage = layui.laypage;
  7.     $ = layui.jquery;
  9.     var count = "{{$total}}";
  10.     var cur_page = "{{$current_page}}";
  11.     var limit = "{{$perPage}}";
  12.     var txt = "{{$txt}}";
  13.     laypage.render({
  14.         elem: 'userPage'
  15.         ,curr:cur_page
  16.         ,count: count
  17.         ,limit:limit
  18.         ,txt:txt
  19.         ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
  20.         ,jump: function(obj,first){
  21.           // console.log(obj)
  22.          //url =window.location.href;
  23.             url = window.location.pathname;//当前页url不带参
  24.             var params = {page:obj.curr, per_num:obj.limit};
  25.             if(!empty(txt)){
  26.                 params['searchq']=txt; //这个是搜索 参数
  27.             }
  28.             url = http_build_query(url, params);
  29.          if(!first){  //跳转必须放在这个里边，不然无限刷新
  30.            window.location.href= url; //跳转
  31.          }
  32.         }
  33.     });
  35.   });
  36. </script>

六、经过两天的尝试，渲染数据的问题依然没有解决

最终是把laravel框架中的links()方法进行了扩展，只是采用了layui的样式

代码：

  1. @if ($paginator->hasPages())
  2.     <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
  3.         {{--<span class="layui-laypage-count">共100条</span>--}}
  4.         {{-- Previous Page Link --}}
  5.         @if ($paginator->onFirstPage())
  6.             {{--<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
  7.                 <span class="page-link" aria-hidden="true">首页</span>
  8.             </li>--}}
  9.             {{--<span class="layui-laypage-curr">
  10.                     <em class="layui-laypage-em"></em>
  11.                     <em>首页</em>
  12.                 </span>--}}
  13.             <a href="javascript:;" class="layui-laypage-last" title="首页" data-page="10">首页</a>
  14.         @else
  15.             {{--<li class="page-item">
  16.                 <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">上一页</a>
  17.             </li>--}}
  18.             <a href="{{ $paginator->previousPageUrl() }}" class="layui-laypage-prev" data-page="1">上一页</a>
  19.         @endif
  21.         {{-- Pagination Elements --}}
  22.         @foreach ($elements as $element)
  23.             {{-- "Three Dots" Separator --}}
  24.             @if (is_string($element))
  25.                 <span class="layui-laypage-spr">{{ $element }}</span>
  26.                 {{--<li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>--}}
  27.             @endif
  29.             {{-- Array Of Links --}}
  30.             @if (is_array($element))
  31.                 @foreach ($element as $page => $url)
  32.                     @if ($page == $paginator->currentPage())
  33.                         {{--<li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>--}}
  34.                         <span class="layui-laypage-curr">
  35.                         <em class="layui-laypage-em"></em>
  36.                         <em>{{ $page }}</em>
  37.                         </span>
  38.                     @else
  39.                         <a href="{{ $url }}" data-page="{{ $page }}">{{ $page }}</a>
  40.                         {{--<li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>--}}
  41.                     @endif
  42.                 @endforeach
  43.             @endif
  44.         @endforeach
  46.         {{-- Next Page Link --}}
  47.         @if ($paginator->hasMorePages())
  48.                         {{--<li class="page-item">
  49.                             <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">下一页</a>
  51.             </li>--}}
  52.             <a href="{{ $paginator->nextPageUrl() }}" class="layui-laypage-next" data-page="">下一页</a>
  53.         @else
  54.             {{--<li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
  55.                 <span class="page-link" aria-hidden="true">尾页</span>
  56.             </li>--}}
  57.             <a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="10">尾页</a>
  58.         @endif
  59.         <span class="layui-laypage-limits">
  60.             <select lay-ignore="" id="perpage" onchange="perpage()">
  61.                 <option value="10" selected="">10 条/页</option>
  62.                 <option value="20">20 条/页</option>
  63.                 <option value="30">30 条/页</option>
  64.                 <option value="40">40 条/页</option>
  65.                 <option value="50">50 条/页</option>
  66.             </select>
  67.         </span>
  68.         <a href="javascript:;" data-page="1" class="layui-laypage-refresh">
  69.             <i class="layui-icon layui-icon-refresh"></i>
  70.         </a>
  71.         <span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页<button type="button" class="layui-laypage-btn">确定</button>
  72.         </span>
  73.     </div>
  74. @endif

结果：

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post