layui 工具条实现分页

最新推荐文章于 2022-05-14 15:35:19 发布

转载最新推荐文章于 2022-05-14 15:35:19 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tangbang/p/10121081.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用JavaScript和layui框架实现动态加载数据及分页功能，通过具体代码示例展示了请求后台数据并更新页面内容的过程，以及利用layui的laypage模块创建分页工具条的方法。

1.页面 
<div id="getShowTable" style="width: 100%; height: auto;clear: both;"></div>

2.js
//请求后台返回页面
function lodPage(page, limit,key) {
        //请求数据
        $.ajax({
            type: "post",
            url: gContextPath + "/wantReturnBid/wantReturnBidList.htm",
            data: {
                "page": page, "limit": limit,"key":key
            },
            dataType: "html",
            success: function (data) {
                $("#getShowTable").html(data);
            }
        });
}

3.请求返回的页面加
//分页工具条
<div id="page_dv" style="text-align: center;"></div>    
//js
 layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        var current =${page.count};
        //分页
        laypage.render({
            elem: 'page_dv'
            , count: current //数据总数
            , curr: '${page.page}'
            , limit: 10
            , groups: 10
            , layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
            , jump: function (obj, first) {
                if (!first) {
                    var key = $(".js_invite_serach_key").val()||"";
                    lodPage(obj.curr, obj.limit,key);
                }
            }
        });

        //回标
        $(document).on("click",".js_return_bid",function(){
            var _th = $(this);
            var _rel = _th.attr("rel");
            window.location.href=gContextPath+"/wantReturnBid/wantReturnBidEdit.htm?planId="+_rel;
        });

    })