【JAVA】JSP+layui框架 靜態表格轉化成數據表格

<table  lay-filter="demo" class="layui-table"  id="excTable">
                <thead>
                <tr >
                    <th lay-data="{field:'emp_ICNumber', width:150, sort:true}">工號</th>
                    <th lay-data="{field:'emp_Name', width:150, sort:true}">姓名</th>
                    <th lay-data="{field:'emp_WorkTeam', width:100, sort:true}">班次</th>
                    <th lay-data="{field:'emp_AlcoholStatus', width:100, sort:true}">考勤方式</th>
                    <th lay-data="{field:'emp_Cause', width:150, sort:true}">考勤狀態</th>
                    <th lay-data="{field:'emp_TestDateTime', width:200, sort:true}">考勤時間</th>
                    <th lay-data="{field:'emp_workHours', width:100, sort:true}">工時</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${maps[0].attences}" var="model">
                    <tr>
                        <%--<td style="display: none">${model.id}</td>--%>
                        <td>${model.emp_ICNumber}</td>
                        <td>${model.emp_Name}</td>
                        <td>${model.emp_WorkTeam}</td>
                        <c:if test="${model.emp_AlcoholStatus=='0'}">
                            <td>正常</td>
                        </c:if>
                        <c:if test="${model.emp_AlcoholStatus=='1'}">
                            <td>飲酒</td>
                        </c:if>
                        <c:if test="${model.emp_AlcoholStatus=='2'}">
                            <td>醉酒</td>
                        </c:if>
                        <c:if test="${model.emp_AlcoholStatus=='4'}">
                            <td>手動添加,未監測</td>
                        </c:if>
                        <td>${model.emp_Cause}</td>
                        <td>${model.emp_TestDateTime}</td>
                        <td>${model.emp_workHours}</td>

                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </tr>
    </table>

表格代碼如上，因為有些未使用接口的原因，數據並非是JSON字符串傳輸到前台，而是綁定的方式，所以生成了靜態表格，而layui很多方法都是基於數據表格的，而且layui有方法將靜態表格轉換成數據表格，然后就可以使用數據表格的所有方法啦。

在<th>中增加屬性

lay-data="{field:'emp_ICNumber', width:150, sort:true}"

上面代碼是我使用的屬性：字段的名稱，寬度，以及是否使用篩選功能。不需要篩選的可以不使用sort屬性。

然后就是js和css的代碼了

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>     <!--頭部加上這個是為了獲取項目的地址-->

    <link rel="stylesheet" href="<%=basePath %>lib/layui/css/layui.css">
    <script type="text/javascript" src="<%=basePath %>js/jquery.min.js"></script>
    <script src="<%=basePath %>lib/layui/layui.js" charset="utf-8"></script>

由於layui是基於jquery的，所以一般還得引用jquery文件，然后是layui的js以及css文件。

<script>
    layui.use(['laydate','table'], function () {
        var table = layui.table;

        //轉換靜態表格
        table.init('demo', {
            height: 330 //設置高度
            ,limit: 10 //注意：請務必確保 limit 參數（默認：10）是與你服務端限定的數據條數一致
            ,page: true //開啟分頁
            //支持所有基礎參數
        });
    });
</script>

代碼如上，必須先使用layui.use方法引用table組件，並將方法賦給table，然后才能使用table.init方法。

 

然后這個是將table轉換成數據表格的內置方法init(初始化) 表格<table>中使用屬性  lay-filter="demo" 然后方法中初始化這個靜態表格。接下來就是