Layui 自带分页功能

最新推荐文章于 2023-09-18 10:21:02 发布

HeRo_OO7

最新推荐文章于 2023-09-18 10:21:02 发布

阅读量370

点赞数 1

分类专栏： Layui 文章标签： layui 自带分页分页 page

本文链接：https://blog.csdn.net/cc111cc111cc/article/details/119863170

版权

Layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

**

## 1.界面显示（按钮+表格）

**
<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" id="btnSearch" style="width: 100px">查询</button>
</div>
<br />
<table class="layui-hide" id="checkList" lay-filter="test"></table>


**

## 2.前端呈现方法

**
<script type="text/javascript">
	//根据需要，自行添加use模块（如：form、table、upload ...等）
    layui.use(['layer', 'form', 'table', 'upload', 'element'], function () {
        var layer = layui.layer,
            upload = layui.upload,
            element = layui.element,
            form = layui.form;
        $ = layui.jquery;
        var table = layui.table;
        
        $("#btnSearch").on("click", function () {
            GetListData(table);//查询方法
        });
});

	//查询数据(A.先得到数据源)
    function GetListData(table) {
        $.ajax({
            url: '/XXXX/GetDataNow/',
            type: 'get',
            dataType: 'json',
            success: function (data) {
                //debugger;
                ShowTableList(table, data);
            },
            error: function (err) {
                layer.alert(err);
            }
        });
    }

	//列表渲染(B.将此前得到的数据源 赋值给 下列“data”，即：“data: dt”)
    function ShowTableList(table, dt) {
        table.render({
            //, toolbar: '#toolbarCheck'
            elem: '#checkList'
              , height: "full-185"
              , cols: [[
                        { type: 'checkbox', fixed: 'left' }
                        , { field: 'aaa', title: '工厂', sort: true, width: 100, fixed: 'left', align: 'center' }
                        , { field: 'bbb', title: '托盘号', sort: true, width: 200, fixed: 'left', align: 'center' }
                        , { field: 'ccc', title: '批次号', width: 220, align: 'center' }
                        , { field: 'ddd', title: '数量', width: 120, align: 'center' }
                        , { field: 'eee', title: '计量单位', width: 250, align: 'center' }
                        , { field: 'fff', title: '状态', width: 100, align: 'center' }
                   
              ]]
             , data: dt //数据源赋值！
               , page: true //是否显示分页
               , limit: 10 //每页默认显示的数量
        });
    }
</script>

**

## 3.后台数据查询（MVC）

**
		#region [查询数据]
        [HttpGet]
        public string GetDataNow()
        {
        	//bll为后端业务数据层
            List<数据实体类> list = bll.GetDataNow();
            return JsonConvert.SerializeObject(list);

        }
        #endregion