layui前端框架基礎介紹（一）

  一、layui的使用步驟

1.   使用layui的第一步就是需要進入到layui官網https://www.layui.com/里面找到自己將要用到的模塊的組件。
2.   點擊下方的下載按鈕將會下載出layui相關的css以及js文件，並且里面會有對應的demo可以用來參考和學習。
3.   layui的使用一般分為兩部分，需要給一個初始的div容器，用來承載將要使用的組件。以及需要構對layui組件進行初始化。這一部分需要屬於js部分的代，很多時候其實是不能直接的看見css樣式，但是layui的封裝，實際已經給到了容器所在的div中。下面呢，我將展示兩種大家比較常用的分頁數據的layui的引用。

   二、layui進行數據分頁

1. 按照第一部分說的那樣，想要使用layui，就需要首先引用layui用到的js和css文件。注意：需要更改樣式的文件路徑。

<link rel="stylesheet" href="~/Content/layui-v2.5.6/layui/css/layui.css" media="all" />
<script src="~/Content/layui-v2.5.6/layui/layui.all.js"></script>

　　2. 第二部分是需要給分頁數據給一個div容器用來承載將要初始化的數據

<div class="layui-tab-item">
                <div id="pageDemo"></div>  最重要的是這行代碼。
            </div>

　　3. 第三部分是對layui進行初始化的階段

<script>
        layui.config({
            version: '1583393622887' //為了更新 js 緩存，可忽略
        });

        layui.use(['laypage','table'], function () {
                , laypage = layui.laypage //分頁
                , table = layui.table //表格
            //分頁
            laypage.render({
                url: "", //接收api的地址
                elem: 'pageDemo' //分頁容器的id
                , count: 100 //總頁數
                , skin: '#1E9FFF' //自定義選中色值
                //,skip: true //開啟跳頁
                , jump: function (obj, first) {
                    if (!first) {
                        layer.msg('第' + obj.curr + '頁', { offset: 'b' });
                    }
                }
            });
</script>

4. 出來之后的效果展示如下：