DataTable. ajax .reload, похоже, не перезагружает таблицу новыми данными - PullRequest
Новая
       9

DataTable. ajax .reload, похоже, не перезагружает таблицу новыми данными

0 голосов
/ 12 июля 2020

Здесь я бьюсь головой о кирпичную стену. У меня есть Datatable, который заполняется вызовом GET для api из раскрывающегося списка. В идеале я хочу, чтобы пользователь выбрал вариант в раскрывающемся списке, и таблица перезагрузится с данными из вызова. Вызывается api, и данные возвращаются с каждым выбором, но таблица не отображает данные и не обновляется, как я ожидал.

CheckIn.cs html

@model IEnumerable<Vidly.Models.Customer>
@{
    ViewBag.Title = "CheckIn";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>CheckIn</h2>

<div class="form-group">
    @Html.DropDownList("Customers", 
    new SelectList(Model, "Id", "Name"), "Please select a customer", 
    new { @class = "form-control", @id = "customers"})
</div>

<table id="rentals" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Id</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

@section scripts
{
    <script>
        $(document).ready(function () {
            var customerId;
            var table = $("#rentals").DataTable({
                ajax: {
                    type: 'GET',
                    url: '/api/RentalsApi/',
                    data: function (d) {
                        d.id = customerId ? customerId : -1;
                    },
                    dataSrc: ""
                },
                columns: [
                    {
                        data: "name"
                    }
                ]
            });

            $('#customers').on('change', function (e) {
                console.log(this.value);
                customerId = this.value;
                table.ajax.reload();
            });
        });
    </script>
}

API 

// GET /api/RentalsApi/{1}
[HttpGet]
public IHttpActionResult GetRental(int id)
{
    if (id == -1) return Json(new System.Web.Mvc.EmptyResult());

    var customer = _context.Customers.SingleOrDefault(c => c.Id == id);
    return Ok(customer);
}

Модель клиента 

using System;
using System.ComponentModel.DataAnnotations;

namespace Vidly.Models
{
    public class Customer
    {
        public int Id { get; set; }

        [Required(ErrorMessage = "Please enter customer's name.")]
        [StringLength(255)]
        public string Name { get; set; }

        public bool IsSubscribedToNewsletter { get; set; }

        public MembershipType MembershipType { get; set; }

        [Display(Name = "Membership Type")]
        public byte MembershipTypeId { get; set; }

        [Display(Name = "Date of Birth")]
        [Min18YearsIfAMember]
        public DateTime? Birthdate { get; set; }
    }
}

1 Ответ

0 голосов
/ 12 июля 2020

Просто сделайте свой ajax вызов api как обычно, а затем используйте его для перерисовки таблицы 

table=$("#rentals").DataTable()
table.clear().rows.add(newData).draw(); //newData is the data you get from your ajax call
...