layui實現分頁

 一 准備工作

首先必須先引入layui的完整目錄,也就是你下載下來的整個layui的目錄都要放在你的資源文件夾下,也就是這個文件目錄

 

 

剛開始接觸layui的時候,以為和jquery,vue等框架一樣,只需要引入相應的js文件和css文件,模快便可以直接使用,因此走了不少的彎路,layui是分模塊化的,只有在使用的時候,layui會去modules下找你use的那個模塊,或者layui.all.js,但是這兩種使用方法不同,一般是引用layui.js和layui.css,在把目錄放好之后,接下來引入layui.js和layui.css

 

<link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
<script src="${staticPath}/js/layui/layui.js"></script>

 二 代碼

<table class="layui-table" id="demo" lay-filter="test"></table>
<script>


    $(function () {


        getCondition();
    });


    var condition;

    function getCondition() {
        var param = getFormJson("#searchForm");
        condition = param;

        layui.use('table', function () {
            var table = layui.table;


            table.render({
　　　　　　　　　　//綁定的元素id
                elem: '#demo',
                url: '${path }/hospitalWasteMaterial/DataList',
                limit: 10,
                request: {
                    pageName: 'pageNo',
                    limitName: 'pageSize'
　　　　　　　　　　　　//頁碼和顯示數量
                },
                method: 'post',
                where: {

　　　　　　　　　　　　//where里是可以傳到后台的參數
                    wasteType: param.wasteType,
                    organizationId: param.organizationId,
                    startTime: param.startTime,
                    endTime: param.endTime
                },
                cols: [[
                    {
                        field: "hospitalNumber", title: "醫療編號", sort: true, templet: function (d) {
                            return d.hospitalNumber;
                        },
                    },
                    {
                        field: "officeName", title: "所屬科室", sort: true, templet: function (d) {
                            return d.officeName;
                        },
                    },
                    {
                        field: "wasteType", title: "廢棄物類型", sort: true, templet: function (d) {
                            return d.wasteType;
                        },
                    },
                    {
                        field: "pockets", title: "袋數", sort: true, templet: function (d) {
                            return d.pockets;
                        },
                    },
                    {
                        field: "weight", title: "重量", sort: true, templet: function (d) {
                            return d.weight;
                        },
                    },
                    {
                        field: "collectDate", title: "收集時間", sort: true, templet: function (d) {
                            var collectTime = d.collectDate

                            var date = new Date(collectTime)
                            var fullYear = date.getFullYear();
                            var month = date.getMonth() + 1;
                            var day = date.getDate();

                            var result = fullYear + '-' + month + '-' + day
                            return result;
                        },
                    },
                    {
                        field: "joinManName", title: "交接人", sort: true, templet: function (d) {
                            return d.joinManName;
                        },
                    },
                    {
                        field: "collectManName", title: "收集人", sort: true, templet: function (d) {
                            return d.collectManName;
                        },
                    }
                ]],
                page: true,//是否開啟分頁
                parseData: function (res) {
                    var data = {
                        "code": 0, //解析接口狀態
                        "msg": res.message, //解析提示文本
                        "count": res.total, //解析數據長度 //這里是總數量 
                        "data": res.list //解析數據列表 這里的data即是渲染到表格中的數據, 因為我傳過來的json數據是list作為key值的,所以這里是個list 根據你自己的json數據進行更改
                    };

                    return data;
                }
            });

        });
    }

 

 

 

三 最后效果