获取服务器动态数据实现table列表的laypage分页

最新推荐文章于 2022-04-24 11:05:03 发布

明天 ~ ~

最新推荐文章于 2022-04-24 11:05:03 发布

阅读量386

点赞数

分类专栏： C# Ajax

本文链接：https://blog.csdn.net/qq_45195669/article/details/104356887

版权

C# 同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Models/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Models/layui-v2.5.6/layui/layui.js"></script>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
</head>
<body>
    <table class="layui-table" lay-skin="line" style="margin:20px 20px 20px 20px">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>班级</td>
            <td>年龄</td>
            <td>性别</td>
            <td>描述</td>
            <td>操作</td>
        </tr>
        <tbody id="tb">
        </tbody>
    </table>
    <div id="demo" style="text-align:center">
    </div>
</body>
</html>
<script>
    //页面启动执行
    $(function () {
        GetStu();
    })

    //从服务器端通过ajax获取学生信息
    function GetStu() {
        $.ajax({
            url: 'http://localhost:55956/api/Student/GetStu',
            type: 'get',
            dataType: 'json',
            success: function (data) {
				//用于分页展示的测试数据，一般通过服务端得到
                layui.use(['laypage', 'layer'], function () {
                    var laypage = layui.laypage, layer = layui.layer;
                    //调用分页
                    laypage.render({
                        elem: 'demo'
                        // 1.elem: 'id' 注意：这里不能加 # 号,2. elem: document.getElementById('id')
                        , count: data.length  //数据总数。一般通过服务端得到            //
                        , limit: 5         //每页显示的条数。laypage将会借助 count 和 limit 计算出分页
                        , limits: [5, 10, 20, 30, 40, 50]   //每页条数的选择项
                        , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                        , theme: '#FF5722'   //自定义主题
                        , first: '首页'
                        , last: '末页'
                        , jump: function (obj) {
                            //模拟渲染
                            document.getElementById('tb').innerHTML = function () {
                                var arr = []
                                    , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                                layui.each(thisData, function (index, item) {
                                    arr.push('<tr><td>' + this.SId + '</td><td>' + this.Name + '</td><td>' + this.CName + '</td>					<td>' + this.Age + '</td><td>' + this.Sex + '</td><td>' + this.Remark + '</td><td>操作</td></tr>');
                                });
                                return arr.join('');
                            }();
                        }
                    });
                });
            }
        })
    }

</script>

在这里插入图片描述

明天 ~ ~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取服务器动态数据实现table列表的laypage分页

## Html页@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href...
复制链接

扫一扫

专栏目录