完美的分页及模板引掣案例

最新推荐文章于 2022-05-24 12:24:21 发布

彩虹上行走

最新推荐文章于 2022-05-24 12:24:21 发布

阅读量484

点赞数

分类专栏：前端技术文章标签：分页 bootstrap 技术插件

本文链接：https://blog.csdn.net/luojy220/article/details/78737257

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

近期进行的项目中需要用到分页的技术，之前一直使用bootstrap的模板，然后使用代码拼接的方式作分页，但这种方式不够优雅，百度了一下，发现layui对于分页的处理比较好，因此学习了一下，经过努力，终于作出了一个非常好的分页案例。

后来又继续学习了layui，发现layui真是有不少好的插件，因此也顺便把layui的模板引掣学习了一下。下面是案例代码。

分页

第一步，引入layui包,当然jquery肯定是不能少的,layui 下载地址

<script src="${pageContext.request.contextPath }/bootstrap/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/background/lib/layui/layui.js"></script>
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath }/background/lib/layui/css/layui.css" />

HTML 代码部分

<body>
    <table>
        <thead>
            <tr>
                <th>名称</th>
                <th>地址</th>
                <th>邮箱</th>
                <th>序号</th>
            </tr>
        </thead>
        <tbody id="content">

        </tbody>
    </table>
    <div id="paged"></div>
</body>

定义模板

<!--laytpl模板  -->
<script id="demo" type="text/html">
{{# for(var i = 0, len = d.length; i < len; i++){ }}
    <tr>
        <td>{{d[i].linkName}}</td>
        <td>{{d[i].linkUrl}}</td>
        <td>{{d[i].linkEmail}}</td>
        <td>{{d[i].orderNum}}</td>
    </tr>
{{#  } }}
{{#  if(d.length === 0){ }}
    无数据
{{#  } }} 
</script>

分页及模板代码部分


<script type="text/javascript">
    //初始化执行方法
    $(document).ready(function() {
        getData(1, 5);
    });

    function getData(curr, limit) {
        //ajax调用
        $.getJSON("${pageContext.request.contextPath }/link?action=backList", {
            currentPage : curr,
            pageSize : limit
        },
        //success后的回调函数
        function(data) {
            //模板引掣
            layui.use('laytpl', function() {
                var laytpl = layui.laytpl;
                var gettpl = document.getElementById('demo').innerHTML; //获取拼接部分的内容  
                laytpl(gettpl).render(data.linkBackList, function(html) { //给拼接的模板绑定数据  
                    document.getElementById('content').innerHTML = html; // 把生成的结构绑定在负责呈现内容的div中。  
                });
            });

            //分页
            layui.use('laypage', function() {
                var laypage = layui.laypage;
                laypage
                        .render({
                            elem : 'paged',//填充目标，paged是ID属性，这里不需要加#
                            count : data.linkCount,//回填数据量
                            limit : limit,//每页显示数量
                            limits : [ 5, 10 ],
                            curr : curr,//当前页
                            groups : 3,//页码连续数
                            first : '首页',
                            last : '尾页', //若不显示，设置false即可  
                            layout : [ 'count', 'prev', 'page', 'next',
                                    'limit', 'skip' ],
                            //跳转后的回调
                            jump : function(obj, first) {
                                //obj包含了当前分页的所有参数，比如：
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit);//得到当前设置的每页显示数量
                                //首次不执行
                                if (!first) {
                                    getData(obj.curr, obj.limit);
                                }
                            }
                        });
            })
        })
    }
</script>