分页插件layui模板引擎+layui分页（用layui写出复用性很好的前后端分离分页很详细）

最新推荐文章于 2023-06-12 16:06:56 发布

倔强的菜鸟

最新推荐文章于 2023-06-12 16:06:56 发布

阅读量998

点赞数 1

文章标签： javascript ajax js

本文链接：https://blog.csdn.net/qq_42758867/article/details/105172461

版权

本文介绍了如何使用layui模板引擎和layui分页组件，为后端人员提供一套易于复用的分页解决方案。通过前端封装分页数据和调用分页模板，利用layui的模板引擎支持的JS语法进行渲染。文章提供了详细的初始化方法和页面翻页功能的实现代码，以确保前后端数据交互简洁高效。

摘要由CSDN通过智能技术生成

因为项目是前后端分离的，由于公司的前端人员不足所以这套分页适用于广大后端人员。前端人员尽量适用vue等框架。

好了这里开始首先肯定是依赖的js和css了，这里用到了layui和json2可以去官网下载。

    <script src="../../../assets/js/jquery-3.3.1.min.js"></script>

    <script src="../../../assets/layui/layui.all.js"></script>

    <script src="../../../assets/js/json2.js"></script>

    <script src="../../../assets/js-v/config.js"></script>

因为用到layui的模板引擎，最好可以去看一下layui的官方文档还是比较详细的
首先这里是一个分页数据的封装


function getPageParams() {
   
    var pageParams = {
   
        pageIndex: 0,
        pageSize: 10

    };
    return pageParams;
};


/**
 * layui.laypage 分页封装
 * @param laypageDivId 分页控件Div层的id
 * @param pageParams 分页的参数
 * @param templateId 分页需要渲染的模板的id
 * @param resultContentId 模板渲染后显示在页面的内容的容器id
 * @param url 向服务器请求分页的url链接地址
 */
function renderPageData(laypageDivId, pageParams, templateId, resultContentId, url) {
   
    if (pageParams == null) {
   
        pageParams = {
   
            pageIndex: 0,
            pageSize: 10
        }
    }
    $.ajax({
   
        url: url,//basePath + '/sysMenu/pageSysMenu',
        method: 'post',
        data: pageParams,//JSON.stringify(datasub)
        beforeSend:
            function (request) {
   
                request.setRequestHeader("token", JSON.parse(localStorage.getItem("token")));
            },
        async: true,
        complete: function (XHR, TS) {
   
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
   
            if ("error" == textStatus) {
   
                layui.msg("服务器未响应，请稍候再试", {
   icon: 5});
            }
        },
        success: function (data) {
   
            var jsonObj;
            if ('object' == typeof data) {
   
                jsonObj = data;
            } else {
   
                jsonObj = JSON.parse(data);
            }
            renderTemplate(templateId, resultContentId, jsonObj);

            layui.use(['laypage', 'layer'], function () {
   
                var laypage = layui.laypage
                    , layer = layui.layer;
                //调用分页
                laypage.render({
   
                    elem: laypageDivId
                    , count: jsonObj.Data.totalPage
                    , jump: function (obj, flag) {
   
                        pageParams.pageIndex = obj.curr;
                        if (flag==undefined) {
   
                            next(templateId,url, pageParams, resultContentId);
                        }
                    }
                });
            });
        }
    });
};

然后具体数据返回后调用的分页模板渲染模板

/**
 * 分页模板的渲染方法
 * @param templateId 分页需要渲染的模板的id
 * @param resultContentId 模板渲染后显示在页面的内容的容器id
 * @param data 服务器返回的json对象
 */
function renderTemplate(templateId, resultContentId, data) {
   
    layui.use(['form', 'laytpl'], function () {
   
        var laytpl = layui.laytpl;
        laytpl($("#" + templateId).html()).render(data, function (html) {
   
            $("#" + resultContentId).html(html);
        });
    });
    layui.form.render();// 渲染
};

这个模板引擎还是相对不错的，支持一些js语法,这里有用到自定义的function应该很容易看懂。
上面的分页渲染就是调用了这个模板渲染出来的。

<script id="page_template_id" type="text/html">
    {
   {
   #  layui.each(d.data.data,function(index, item){
    }}
    <tr>
        <td style="text-align:center;&#