0

我目前正在使用 .net 核心 web api 中的 json 填充 html 表，如下所示：

<div class="container" style="margin-top:150px">
<table class="table table-bordered" id="eventTable" width="100%" cellspacing="0">
    <thead class="thead-light">
        <tr><th></th></tr>
    </thead>
    <tbody id="event"></tbody>
</table>


@section Scripts {
<script type="text/javascript">
    $(document).ready(function () {
        getEvents();

    });

    function getEvents() {
        var json_url = 'https://localhost:44331/api/event/';
        $.ajax({
            url: json_url,
            type: 'GET',


            //$.getJSON(json_url, function (data) {
            success: function (data) {
                $('#event').empty();
                $.each(data, function (index, element) {

                    var datetime = element.eventDate
                    var date = datetime.split('T')[0];

                    $('#event').append('<tr><td><h3 id="heading1">' + element.eventName +
                        '</h3><h5 id="heading2">/' + date +
                        '</h5><br/>' + element.eventDescription +
                        '</td></tr>'
                    );
                });


            }
        });
    }




    });
</script>

我的json如下：

[{"eventId":1,"eventName":"test","eventDescription":"sHJBDFKvawefweagukvf vutr6yfr6tff7r6f 6rtfc6rdf","eventDate":"2019-12-20T00:00:00"},{"eventId":2,"eventName":"test 2","eventDescription":"seriuhvgfde  sd fdwe8avbf8 fgty6awbytf ","eventDate":"2019-08-21T00:00:00"},{"eventId":3,"eventName":"test3","eventDescription":"dvt evtcge5stv srttyc","eventDate":"2020-01-05T00:00:00"},{"eventId":4,"eventName":"test4","eventDescription":"erafsvzsfdvff","eventDate":"2020-01-06T00:00:00"},{"eventId":5,"eventName":"test4","eventDescription":"erafsvzsfdvff","eventDate":"2020-01-06T00:00:00"},{"eventId":6,"eventName":"test4","eventDescription":"erafsvzsfdvff","eventDate":"2020-01-06T00:00:00"},{"eventId":7,"eventName":"test4","eventDescription":"erafsvzsfdvff","eventDate":"2020-01-06T00:00:00"},{"eventId":8,"eventName":"test4","eventDescription":"erafsvzsfdvff","eventDate":"2020-01-06T00:00:00"}]

我想知道如何在客户端对这张表进行分页。我尝试使用 jquery 数据表，但在一行有很多元素的情况下找不到任何文档。谢谢你的帮助。

4

2 回答 2

0

试试这样。我希望这能解决你的问题

在你的 .cshtml 中这样做

<table id="example" class="table table-condensed table-bordered table-striped">
<thead>
    <tr>
       <th>Product ID</th>
       <th>Product Name</th>
       <th>Quantity Per Unit</th>
       <th>Unit Price</th>
       <th>Units In Stock</th>
    </tr>
</thead>
</table

将 js 添加到您的脚本部分

<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>

将这些行添加到 Global.ascx 作为

protected void Application_Start()
{     GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
        GlobalConfiguration.Configuration.Formatters.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);
 }

在你的控制器中..

    [HttpGet]
    [Route("api/Products")]
    public List<Product> GetProducts()
    {
        return productRepository.GetProducts().ToList(); 
    }

您可以将您的 api 响应作为数据源绑定到数据表

  $(document).ready(function () {
        $('#example').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            paging: false,
            searching: false,
            ajax: "api/Products",
            columns: [
                { "data": "ProductID" },
                { "data": "ProductName" },
                { "data": "QuantityPerUnit" },
                { "data": "UnitPrice" },
                { "data": "UnitsInStock" }
            ]
        });
    });

并将模型添加为 Product.cs 作为

public partial class Product
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public string QuantityPerUnit { get; set; }
    public Nullable<decimal> UnitPrice { get; set; }
    public Nullable<short> UnitsInStock { get; set; }
}
于 2020-01-12T16:23:27.423 回答
0

我按照 Mayank Patel 的建议使用 simplepagination 插件解决了我的问题。

于 2020-01-17T04:48:25.180 回答