layui div表格分页处理

最新推荐文章于 2024-08-03 13:41:47 发布

往事知多少 .

最新推荐文章于 2024-08-03 13:41:47 发布

阅读量599

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/H_Lobster/article/details/106995189

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表头

表格为div，以适配移动端样式
2-5行为表头

<div class="layui-row hidden-mobile layui-bg-white layui-col-space30">
    <div class="layui-col-sm2 text-center">原始积分</div>
    <div class="layui-col-sm6">事项</div>
    <div class="layui-col-sm2 text-center">变动积分</div>
    <div class="layui-col-sm2 text-center">积分余额</div>
    <div class="layui-btn-xs12"><hr class="layui-bg-gray"></div>
</div>
<!--pc端样式开始   -->
<div class="layui-row hidden-mobile table-container layui-bg-white layui-col-space30" id="pcPointList">

</div>
<!--pc端样式结束   -->
<!--移动端样式开始-->
<div class="layui-row hidden-pc mb-32  layui-col-space30" id="mobilePointList">
    
</div>    

<div class="layui-row layui-col-space30">
    <div class="layui-col-xs12" style="padding: 15px 0  ;">
        <div id="page"></div>
    </div>
</div>

《div id=“page”》《/div》 page为分页组件的id

表体

window.Apis.pointListData() 为前端封装的Ajax接口请求，表格数据的数据接口
var div = ’ ’ 为自己的表体样式拼接的字符串

window.Apis.pointListData().then(function (res) {
    var count = res.count;
    var data = res.data;
    if(!count){ // 没有数据的情况
        return
    }
    layui.laypage.render({
        elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
    	,prev: "<i class='layui-icon font-xs layui-icon-prev'></i>"
        ,next: "<i class='layui-icon font-xs layui-icon-next'></i>"
        ,count: count //数据总数，从服务端得到
    	,limit: 5 //每页显示条数
    	,curr: 1 //获取起始页
    	,jump: function (obj) {
        	/* pc端积分列表 */
            document.getElementById('pcPointList').innerHTML = function () {
                var arr = [],
                thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                layui.each(thisData, function (index, item) {
                    var div = '<div class="layui-col-sm2  layui-col-xs6 text-center">' + item.before + '</div>' +
                        '<div class="layui-col-sm6 layui-col-xs6">' + item.reason + '</div>' +
                        '<div class="layui-col-sm2  layui-col-xs6 text-center text-primary">' + item.point + '</div>' +
                        '<div class="layui-col-sm2  layui-col-xs6 text-center">' + item.after + '</div>';
                    arr.push(div);
                })
                return arr.join('');
            }();
			/* 移动端积分列表 */
            document.getElementById('mobilePointList').innerHTML = function () {
                var arr = [],
                thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                layui.each(thisData, function (index, item) {
                    var div = '<div class="layui-col-xs12 border-radius-4 layui-bg-shallow-blue text-center">' +
                        '<div class="d-flex-row mb-8" style="justify-content: space-between">' +
                        '<span class="title-text">' + item.reason + '</span>' +
                        '<span class="text-primary">' + item.point + '</span>' +
                        '</div>' +
                        '<div class="d-flex-row" style="justify-content: space-between">' +
                        '<span class="layui-text">' + item.date + '</span>' +
                        '<span class="layui-text">积分余额：' + item.after + '</span>' +
                        '</div>' +
                        '</div>';
                    arr.push(div);
                })
                return arr.join('');
            }();
        }
    });
});