demo示例的layui 分頁

一、主要是實現在自己特定的表格中的追加自己想要的數據。首先肯定是導入demo中的css和js文件，其次就是需要將innerHtml改成outerHTML，具體的區別自己去研究一下JavaScript官文文檔。

@*@model IEnumerable<Sbi.DataCenter.Dto.SupplierDto>*@
@*<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>*@

<style asp-src="~/Sbi.DataCenter/Others/sku/common.css" at="Head"></style>
<div class="row">
    <div class="form-group col mb-n1">
        <h1>@RenderTitleSegments(T["Supplier"])</h1>
        <h1></h1>
    </div>
    <div class="form-group col mb-n1">
        <div class="dropdown float-right order-md-1">
            <a asp-route-action="CreateSupplier" class="btn btn-primary float-right" role="button">@T["Add Supplier"]</a>
        </div>
    </div>
</div>

<form asp-action="Index">
    <table id="customers" align="left">

    </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/Supplier/GetDataList", {}, function (res) {
                laypage.render({
                    elem: 'demo20'
                    , count: res.length
                    , limit: 20
                    , jump: function (obj) {
                        //模擬渲染
                        document.getElementById('customers').innerHTML = function () {
                            var tabel_heard = '<tr>';
                            tabel_heard += '<th style="text-align:center;">代號</th>';
                            tabel_heard += '<th style="text-align:center;">名稱</th>';
                            tabel_heard += '<th style="text-align:center;">標志</th>';
                            tabel_heard += '<th style="text-align:center;">是否啟用</th>';
                            tabel_heard += '<th style="text-align:center;">功能</th>';
                            tabel_heard += '</tr>';
                            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.code + "</td><td> " + res.name + "</td><td>" + res.logo + "</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/Supplier/EditSupplier?id= " + res.id + "'>編輯</a> <a class='delete btn btn-danger btn-sm' href='/Sbi.DataCenter/Supplier/IsDeleted?id= " + res.id + "'onclick = 'if(confirm('確定刪除嗎？')==false)return\xa0false;'>刪除</a ></td ></tr>";
                                console.log(option);
                                arr.push(option);
                            });
                            return tabel_heard+arr.join('');
                        }();
                    }
                });
            });

        });
    })
</script>