demo示例的layui 分页

Posted 2020-11-29 wangjinya

一、主要是实现在自己特定的表格中的追加自己想要的数据。首先肯定是导入demo中的css和js文件，其次就是需要将innerhtml改成outerHTML，具体的区别自己去研究一下javascript官文文档。

@model IEnumerable<LanguageDto>
<style type="text/css">
    #customers {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        width: 100%;
        border-collapse: collapse;
    }

        #customers td, #customers th {
            font-size: 1em;
            border: 1px solid #98bf21;
            padding: 3px 7px 2px 7px;
        }

        #customers th {
            font-size: 1.1em;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #A7C942;
            color: #ffffff;
        }

        #customers tr.alt td {
            color: #000000;
            background-color: #EAF2D3;
        }
</style>
<div class="row">
    <div class="form-group col mb-n1">
        <h1>@RenderTitleSegments(T["语言"])</h1>
        <h1></h1>
    </div>
    <div class="form-group col mb-n1">
        <div class="dropdown float-right order-md-1">
            <a asp-route-action="CreateLanguage" class="btn btn-primary float-right" role="button">@T["添加语言"]</a>
        </div>
    </div>
</div>
@*<form autocomplete="off">
        <div class="card mb-3">
            <div class="card-body bg-light p-3">
                <div class="form-group mb-n1">
                    <div class="input-group input-group-sm w-lg-50">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-secondary text-light">@T["Filter"]</span>
                        </div>
                        <input id="search-box" class="form-control mr-sm-2" type="text" placeholder="@T["Search"]" autofocus="autofocus">
                    </div>
                </div>
            </div>
        </div>
    </form>*@

<form asp-action="Index">
    <table id="customers" align="left">
        <tr>
            <th style="text-align:center;">名称</th>
            <th style="text-align:center;">语言</th>
            <th style="text-align:center;">标准</th>
            <th style="text-align:center;">排序号</th>
            <th style="text-align:center;">是否启用</th>
            <th style="text-align:center;">功能</th>
        </tr>
        <tr id="cen"></tr>
    </table>

    <div id="list-alert" class="alert alert-info d-none" role="alert">
        @T["<strong>Nothing here!</strong> Your search returned no results."]
    </div>
</form>


<div style="float:right;margin-right:200px;" id="demo20"></div>
<style asp-src="~/Sbi.DataCenter/Styles/layui.css" at="Head"></style>

<script asp-name="bootstrap" version="4" at="Foot"></script>
<script asp-src="~/Sbi.DataCenter/Scripts/layui.all.js" at="Foot"></script>

<script type="text/javascript" at="Foot">
    $(function () {

        layui.use([‘laypage‘, ‘layer‘], function () {
            var laypage = layui.laypage
                , layer = layui.layer;

            $.get("/Sbi.DataCenter/Language/GetDataList", {}, function (res) {
                laypage.render({
                    elem: ‘demo20‘
                    , count: res.length
                    , limit: 20
                    , jump: function (obj) {
                        //模拟渲染
                        document.getElementById(‘cen‘).outerHTML = function () {
                            var arr = []
                                , thisData = res.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, res) {
                                console.log(res);
                                //alert(res.name);  
                                var option = "<tr align=‘center‘><td>" + res.name + "</td><td> " + res.languageCulture + "</td><td>" + res.normalizedCulture + "</td><td>"+res.displayOrder+"</td>";
                                if (res.isActive) {
                                    option += " <td> <input type=‘checkbox‘ disabled=‘true‘ checked /> </td>";
                                }
                                else {
                                    option += "<td> <input type=‘checkbox‘ disabled=‘true‘ /> </td>";
                                }
                                option += " <td><a class=‘edit btn btn - primary btn - sm‘ href=‘/Sbi.DataCenter/Language/EditLanguage?id= " + res.id + "‘>编辑</a> <a class=‘delete btn btn-danger btn-sm‘ href=‘/Sbi.DataCenter/Language/IsDeleted?id= " + res.id + "‘onclick = ‘if(confirm(‘确定删除吗？‘)==false)returnxa0false;‘>删除</a ></td ></tr>";
                                console.log(option);
                                arr.push(option);
                            });
                            return arr.join(‘‘);
                        }();
                    }
                });
            });

        });
    })
</script>