search

博客列表 >20200123-Laypage的使用-***线上九期班

20200123-Laypage的使用-***线上九期班

邯郸易住宋至刚
邯郸易住宋至刚原创
2020年01月23日 22:31:20966浏览

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

结果：

上一条：20200124--paginate()方法的封装与使用下一条：10月12日作业，自定义一个上传异常类
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多