用户工具

站点工具


util-pagelist_基于layui封装的ajax分页列表

Pagelist——基于layui封装的ajax分页列表

使用说明

/**
 * layui分页列表模板引擎(使用时请使用new Pagelist(), 将每个分页模板当成一个独立的实例)
 * @param tplid     模板id
 * @param viewid    渲染模板容器的id
 * @param pageid    分页容器id
 * @param httpurl   请求接口的url
 * @param param     请求接口的参数
 * @param method    接口请求方式(get、post)
 */
function Pagelist(tplid, viewid, pageid, httpurl, param, method) {
    if (!method) {
        method = "GET";
    }
    if (!param) {
        param = {};
    }
    var _this = this;
    this.page = 1;
    this.limit = 10;
    this.theme = '#0092fa';
    this.paramType = 1; // 1: 'JSON', 2:JSON.stringify
    this.renderPage = function (totalCount, currPage) {
        laypage.render({
            elem: pageid,
            count: totalCount,
            curr: currPage,
            theme: _this.theme,
            jump: function (obj, first) {
                //首次不执行
                if (!first) {
                    _this.page = obj.curr;
                    _this.limit = obj.limit;
                    // document.body.scrollTop = $('#' + viewid).offset().top - 100;
                    _this.request(obj.curr, obj.limit);
                }
            }
        });
    };
    this.renderTpl = function (data) {
        if (!data) {
            data = [];
        }
        var getTpl = document.getElementById(tplid).innerHTML,
            view = document.getElementById(viewid);
        laytpl(getTpl).render(data, function (html) {
            view.innerHTML = html;
        });
    };
    this.request = function () {
        document.getElementById(viewid).innerHTML = '<div class="common-loading"></div>';

        param['page'] = _this.page;
        param['limit'] = _this.limit;
        new ajaxRequest({
            type: method,
            url: httpurl,
            data: _this.paramType === 1 ? param : JSON.stringify(param),
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                if (data.code === 0) {
                    _this.renderPage(data.total, data.pageNum);
                    _this.renderTpl(data.list);
                } else {
                    _this.renderTpl([]);
                }
            },
            error: function (jqXHR) {
                _this.renderTpl([]);
            }
        });
    };

    this.init = function () {
        _this.page = 1;
        _this.request();
    };

    this.refresh = function () {
        _this.request();
    };

    setTimeout(function () {
        _this.init();
    }, 0);
}
util-pagelist_基于layui封装的ajax分页列表.txt · 最后更改: 2021/12/23 17:19 (外部编辑)