Разбивка на стороне клиента для пользовательских строк - PullRequest
Новая
       6

Разбивка на стороне клиента для пользовательских строк

0 голосов
/ 10 января 2020

В настоящее время я заполняю таблицу html с помощью json из основного веб-API. net следующим образом: 

<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>

my 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 datatables, но не смог найти никакой документации для моего сценария, где в одной строке много элементов. Спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 17 января 2020

Я решил свою проблему с помощью плагина simplepagination, как советовал Mayank Patel.

0 голосов
/ 12 января 2020

просто попробуйте вот так. Надеюсь, это решит вашу проблему

Сделайте это в ваших .cs html

<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; }
}
...