在外部方法使用Ajax请求返回的数据//layui实现数据分页功能

最新推荐文章于 2024-02-22 10:18:29 发布

西柚要努力

最新推荐文章于 2024-02-22 10:18:29 发布

阅读量1.3k

点赞数 1

分类专栏：心得文章标签： jquery layui ajax

本文链接：https://blog.csdn.net/qq_43676606/article/details/100976190

版权

心得专栏收录该内容

28 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>Title</title>
    <script src="../my/jquery/js/jquery.js"></script>
    <script src="layui/layui.js"></script>
</head>
<body>
<div class="layui-tab-item layui-show">
    <table class="layui-table" lay-skin="line">
        <colgroup>
            <col width="20">
            <col width="200">
            <col width="200">
            <col width="200">
            <col width="200">
            <col width="200">
            <col width="200">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th> <input type="checkbox" ></th>
            <th>任务编号</th>
            <th>任务类型</th>
            <th>单据编号</th>
            <th>是否是GSP订单</th>
            <th>任务预警</th>
            <th>任务创建时间</th>
            <th>任务执行时间</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody class="res-test">
        <tr></tr>
        </tbody>
    </table>
</div>
<div id="show"></div>
<script>
 $(function(){
     var total;
    function showReocrd(pageNum,pageSize) {
        $.ajax({
            type: "POST",
            url: '你自己的地址',
            dataType: 'JSON',
            async:false,
            data: JSON.stringify({
                baseApplicationId: "55",
                baseOrgId: "1",
                pageNum: pageNum,
                pageSize:pageSize
            }),
            headers: {
                'Content-Type': 'application/json',
                'X-Token': 'eyJiYXNlQ3BJZCI6MSwiYmFzZURhdGFVcmwiOiJqZGJjOm15c3FsOi8vcm0tYnAxNWsyeWQ3NW00cWQ1aXkyby5teXNxbC5yZHMuYWxpeXVuY3MuY29tOjMzMDYveW5vbXM_c2VydmVyVGltZXpvbmU9QXNpYS9TaGFuZ2hhaSZ1c2VPbGRBbGlhc01ldGFkYXRhQmVoYXZpb3I9dHJ1ZSIsImJhc2VEYXRhTmFtZSI6Inlub21zIiwiYmFzZURhdGFVc2VyTmFtZSI6Inlub21zX3Rlc3QiLCJiYXNlRGF0YVBhc3N3b3JkIjoiZHNmZGFzZmFzZmQiLCJmbGFnIjoxLCJhbGciOiJIUzUxMiJ9.eyJleHAiOjEwMjAxMzU3NzQwLCJqdGkiOiIxMzAifQ.g31XcCzVRyPIPyoGOUXq2AKdhcG4pN-lURa_xtCof8FUSS233jM0yjcSGvUHvLKuMv12tqHR3UJIFj0L-FcylA'
            },
            success: function (data) {
                console.log(data.rst);
                var str = '';
                var list = data.rst.list;
                total = data.rst.total;
                list.map(function (listTag) {
                    str += `<tr><td><input type="checkbox" ></td>
                        <td>${listTag.taskCode}</td>
                        <td>${listTag.taskType == 1 ? '销售发货' : (listTag.taskType == 6 ? '采购收货' : '采购发货')}</td>
                        <td>${listTag.billCode}</td>
                        <td>${listTag.isGspOrder == 0 ? '不是' : '是'}</td>
                        <td>${listTag.isWarning == 0 ? '正常' : '超时'}</td>
                        <td>${listTag.taskCreatedTime}</td><td>${listTag.taskStartTime}</td><td>${listTag.remarks}</td></tr>`
                })
                $('.res-test').html(str);
            }
        })
    }

    showReocrd(1,10);
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        laypage.render({
                elem: 'show',
                count: total,
                limit:10,
                limits: [5,10,15, 20],
                curr:1,
                layout: ['prev', 'page', 'next', 'limit', 'skip'],
                 jump: function (obj, first) {
                     console.log(obj);
                    if (!first) {
                        // $('.res-test').empty();
                        showReocrd(obj.curr,obj.limit);
                    }
                }
            });
        })
    })
</script>
</body>
</html>

资料借鉴：
https://blog.csdn.net/dxnn520/article/details/8306744
Jquery和JS用外部变量获取Ajax返回的参数值！（超简单）
https://blog.csdn.net/qq_28817739/article/details/79318667
在外部方法使用Ajax请求返回的数据
https://blog.csdn.net/LittleBlackyoyoyo/article/details/84979006
layui实现数据分页功能（ajax异步）
https://blog.csdn.net/qq_42715762/article/details/82791089
layui的分页实例详解
https://www.cnblogs.com/youcong/p/9296424.html
最易懂的layui分页

西柚要努力

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
在外部方法使用Ajax请求返回的数据//layui实现数据分页功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录