使用Laypage进行分页

来源：互联网发布：淘宝数据公式pv uv 编辑：程序博客网时间：2024/04/30 21:18

使用Laypage进行分页

Laypage是一款简单，方便的分页插件，无需写过多的js代码

只需要向后台传入当前页数（由于本人偷懒在JS中写死了pageSize）

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"><head>    <title>Hello World!</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <link rel="stylesheet" href="css/layui.css" media="all"></head><body><table class="layui-table">    <colgroup>        <col width="150">        <col width="200">        <col>    </colgroup>    <thead>    <tr>        <th>id</th>        <th>index</th>        <th>date</th>        <th>number</th>        <th>tabelName</th>        <th>columnNames</th>    </tr>    </thead>    <tbody id="record">    </tbody></table>    <div align="center">        <div id="page"></div>    </div></body><script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js" type="text/javascript"></script><script src="js/layui.js" type="text/javascript"></script><script src="js/laypage.js" type="text/javascript"></script><script type="text/javascript">    //console.log(6666666666)    //Laypage入口，表示使用laypage组件    layui.use(['laypage', 'layer'], function() {        var laypage = layui.laypage                , layer = layui.layer;        function demo(curr) {            $.getJSON('r', {                page: curr || 1 //向服务端传的参数，当前页数            }, function (json) {//json为后台传入前台的json数据                //此处获取json内容                var json1 = json[1];//分页的数据                count = json[0];//获取总记录数                var pageSize = 2;//每页显示个数                var pages = count % pageSize == 0 ? count / pageSize : count / pageSize + 1;//计算多少页                //遍历json                //console.log(json1);                //console.log(count);                //var obj = JSON.parse(result);                //$('#record').empty(); //清空内容                var content = "";                //下面是后台传到前台的json数据                $.each(json1, function (i, obj) {                    content += "<tr><td>";                    content += i+1;                    content += "</td><td>";                    content += obj.ObjectId;                    content += "</td><td>";                    content += obj.date;                    content += "</td><td>";                    content += obj.records;                    content += "</td><td>";                    content += obj.tableName;                    content += "</td><td>";                    content += obj.columnName;                    content += "</td></tr>";                    $('#record').html(content);                });                //显示分页                laypage({                    cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page"></div>                    pages: pages, //通过后台拿到的总页数                    curr: curr || 1, //当前页                    skip: true, //是否开启跳页                    skin: '#0ea7af',                    groups: 3 ,//连续显示分页数                    jump: function (obj, first) { //触发分页后的回调                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr                            demo(obj.curr);                        }                    }                });            });        };        //运行        demo();    });</script></html>

后台：@Controllerpublic class RecordController {    @Autowired    private RecordService recordService;    @RequestMapping("/pages")    //负责跳转    public String queryPage(){        //session.setAttribute("page",page);        return "record";    }    @RequestMapping("/r")    @ResponseBody    //json封装    public String json(@RequestParam("page") int page,HttpServletRequest request){        //@RequestParam("page") int page, @RequestParam("size")int size        List querylist = new ArrayList();        querylist = recordService.queryPage(page,2);        JSONArray jsonArray = JSONArray.fromObject(querylist);        //System.out.println(jsonArray);        String json = jsonArray.toString();        System.out.println(json);        return json;    }

这样就实现了使用layPage的简单分页，如有错误欢迎指出，(^__^) 嘻嘻……
补充：不要忘记引入相关js和css文件
Laypage官网：http://www.layui.com/laypage/，上面有详细的使用文档和样式。

阅读全文

1 0