Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.2k views
in Technique[技术] by (71.8m points)

layer分页组件,为什么设置了count它始终默认10条

我这样设置应该是5页每页1条,为什么它始终只显示一页每页一条数据,真没搞懂啊....

//使用layui分页
layui.use('laypage', function() {
    var laypage = layui.laypage;
    laypage.render({
        elem: 'demo1',
        count: totalCount,
        jump: function(obj, first) {
            //点击非第一页页码时的处理逻辑。比如这里调用了ajax方法,异步获取分页数据
            if (!first) {
                console.log(obj)
                pagination(obj.curr, 1); //第二个参数不能用变量pageSize,因为当切换每页大小的时候会出问题
            }
        }
    });
});

var pageNumber = 1;
var pageSize = 1;
var totalCount = 0;
pagination(pageNumber, pageSize);

function pagination(pageIndex, pageSize) {
    var param = {
        pageNumber: pageIndex,
        pageSize: pageSize,
        type: newsType
    };
    $.ajax({
        type: 'POST',
        url: API.news.newList,
        dataType: 'json',
        data: param,
        async: false, //这里设置为同步执行,目的是等数据加载完再调用layui分页组件,不然分页组件拿不到totalCount的值
        success: function(data) {
            console.log(data)
            vue.list = data.data.content;
            totalCount = data.data.totalCount;//这里总数是5~~~~
        }
    });
};

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

这是我找的实例,应该合适,原文地址:https://www.cnblogs.com/laowe...

layui.use('table', function () {
    var table = layui.table;
    //第一个实例
    table.render({
        elem: '#demo'
        , url: 'http://localhost/php/public/index.php/index/index/index' //数据接口
        , method: 'post'
        , page: true //开启分页
        , limit: 3
        , limits: [2, 3, 5]
        , cols: [[
            { width: 80, type: 'checkbox' },
            { field: 'type_id', width: 80, title: 'ID', sort: true },
            { field: 'type_name', title: '分类名称', sort: true }
        ]],
        parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.data //解析数据列表
            };
        },
        request: {
            pageName: 'page' // 页码的参数名称,默认:page
            , limitName: 'size' //每页数据量的参数名,默认:limit
        },
    });
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...