js分页插件laypage的简单应用

　　之前一直用layer弹出层，感觉效果还挺好的。今天偶然看到了layer作者开发的另外一个插件,laypage。一个js分页插件，依旧是挺好用的。主页地址：http://laypage.layui.com/，有兴趣的可以去研究一下。下面我演示一个简单的异步获取的demo，结合php来实现。

　　1、新建一个文件夹 laypage
　　2、将下载下来的laypage插件解压放到laypage文件夹中
　　3、新建一个index.html 以及一个 index.php

　　index.html的代码如下：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>layPage demo</title>
 6 </head>
 7 <body>
 8 
 9 <ul id="view1"></ul> <!-- 此处显示每页的数据 -->
10 
11 <div id="page1"></div> <!-- 此处显示分页页码 -->
12 
13 <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
14 <script type="text/javascript" src="laypage/laypage.js"></script>
15 <script type="text/javascript">
16     //以下将以jquery.ajax为例，演示一个异步分页
17     function demo(curr){
18       $.getJSON('index.php', {
19         page: curr || 1 //向服务端传的参数
20       }, function(res){
21         //根据逗号拆分获取的数据
22         var content = res.content;
23         var _html = "";
24         for( var i = 0; i < content.length; i++  ){
25             _html += "<li>" + content[i] + "</li>";    
26         }
27         document.getElementById('view1').innerHTML = _html;
28         //显示分页
29         laypage({
30           cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象
31           pages: res.pages, //通过后台拿到的总页数
32           curr: curr || 1, //当前页
33           jump: function(obj, first){ //触发分页后的回调
34             if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
35               demo(obj.curr);
36             }
37           }
38         });
39       });
40     };
41     //运行
42     demo();
43 </script>
44 
45 </body>
46 </html>

　　当访问页面的时候，会向后台index.php发送一个请求，并把当前的页码通过get传参的方式以page为参数传到后台，后台只要接受这个参数，然后根据自己的逻辑分页取出数据就可以了。前台插件需要的参数就是分页的页数，以及分页的内容。

　　index.php　

 1 <?php
 2 //Author: NickBai <1902822973@qq.com>
 3 
 4 //模拟数据库的总数据
 5 $data = [
 6     '北京',
 7     '上海',
 8     '广州',
 9     '深圳',
10     '杭州',
11     '长沙',
12     '合肥',
13     '宁夏',
14     '成都',
15     '西安',
16     '南昌',
17     '上饶',
18     '沈阳',
19     '济南',
20     '厦门',
21     '福州',
22     '九江',
23     '宜春',
24     '赣州',
25     '宁波',
26     '绍兴',
27     '无锡',
28     '苏州',
29     '徐州',
30     '东莞',
31     '佛山',
32     '中山',
33     '成都',
34     '武汉',
35     '青岛',
36     '天津',
37     '重庆',
38     '南京',
39     '九江',
40     '香港',
41     '澳门',
42     '台北'
43 ];
44 
45 $pages = count( $data );  //总页数
46 $pageSize = 5;  //每页显示5条
47 $pages = ceil( $pages/$pageSize );  //每页显示5条数据后的总页数
48 
49 $nowPage = $_GET['page'];  //当前页码
50 
51 $content = array_slice( $data, ($nowPage - 1) * $pageSize, $pageSize );  //模拟每页的数据
52 
53 echo json_encode( ['pages' => $pages, 'content' => $content] );

 效果如下:

posted @ 2016-10-10 09:42  NickBai  阅读(1596)  评论(0)  编辑  收藏  举报