Laypage完整分页示例

最新推荐文章于 2022-05-10 10:45:30 发布

明天 ~ ~

最新推荐文章于 2022-05-10 10:45:30 发布

阅读量543

点赞数

分类专栏： Mvc C# layui

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

版权

C# 同时被 3 个专栏收录

50 篇文章 1 订阅

订阅专栏

Mvc

5 篇文章 0 订阅

订阅专栏

layui

2 篇文章 0 订阅

订阅专栏

		//控制器
		//连接Apihelper
		HttpClientHelper helper = new HttpClientHelper("http://localhost:58185/");
		
		//获取部门信息
        public IActionResult GetSection(int page = 0,int limit = 0)   //page  第几页   limit  每页显示多少条
        {
            string json = helper.Get("api/Section/GetSection");
            List<Section> list = JsonConvert.DeserializeObject<List<Section>>(json);
			//Linq分页
            var Result = list.Skip((page-1) * limit).Take(limit);
			
            return Json(new Layui { 
                code = "0",
                msg = "成功",
                count = (list.Count).ToString(),
                data = Result
            });
        }
		//部门视图
        public IActionResult SectionView ()
        {
            return View();
        }

//视图
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>部门 - 显示</title>
    <link href="~/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/layui-v2.5.6/layui/layui.js"></script>
</head>
<body>
    <table class="layui-hide" id="test"></table>
</body>
</html>
<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: '/Section/GetSection'
            , limit: 5         //每页显示的条数。laypage将会借助 count 和 limit 计算出分页
            , limits: [5, 10, 20, 30, 40, 50]   //每页条数的选择项
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , theme: '#FF5722'   //自定义主题
            , first: '首页'
            , last: '末页'
            , cols: [[
                { field: 'sId', width: 100, title: '编号', sort: true }
                , { field: 'sName', width: 100, title: '用户名' }
            ]]
            , page: true
        });
    });
</script>

明天 ~ ~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Laypage完整分页示例

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>laypage</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-...
复制链接

扫一扫

专栏目录