DataTable如何從AJAX中獲取數據

Question

我一直在學校里制作CRUD表，傳統上每頁都有腳手架，想要試試我是否能在不使用Partial View的情況下完成所有操作。 我選擇使用AJAX，我在這里遵循指南： https ： //dzone.com/articles/crud-operation-in-aspnet-mvc-using-ajax-and-bootst

Everthing完美無缺，但我想使用DataTable API向表中添加搜索和排序功能。 這是該表的樣子這里 。

正如您所看到的，它無法識別來自JS的數據，最明顯的是“顯示0到0的0條目”。 有沒有辦法將數據從AJAX加載到DataTable腳本？ 非常感謝！ 我將在下面提供我的代碼。

編輯：我把DataTable啟動在Inventory.js中，DataTable SOMETIMES在頁面加載時工作。 嘗試多次刷新頁面時，它非常隨機。 我嘗試在頁面加載之前設置一個延遲，看看是否有任何區別，但它不起作用。 誰知道會發生什么？

庫存（模型）

    public List<Inventory> ListAll()
    {
        List<Inventory> lst = new List<Inventory>();
        using (SqlConnection con = new SqlConnection(Helper.GetCon()))
        {
            con.Open();
            string query = @"SELECT * FROM Inventory";
            using (SqlCommand cmd = new SqlCommand(query, con))
            {
                using (SqlDataReader dr = cmd.ExecuteReader())
                {
                    while (dr.Read())
                    {
                            lst.Add(new Inventory
                        {   
                            InventoryId = Convert.ToInt32(dr["inv_id"]),
                            Category = Helper.Decrypt(dr["category_name"].ToString()),
                            Name = Helper.Decrypt(dr["item_name"].ToString()),
                            Details = Helper.Decrypt(dr["item_details"].ToString()),
                            Quantity = Convert.ToInt32(dr["quantity"]),
                            CsbCode = Helper.Decrypt(dr["csb_code"].ToString()),
                            Notes = Helper.Decrypt(dr["notes"].ToString()),
                            Location = Helper.Decrypt(dr["location"].ToString()),
                            DateCreated = DateTime.Parse(dr["date_created"].ToString()),
                            LastModified = DateTime.Parse(dr["last_modified"].ToString()),
                        });
                    }
                    return lst;
                }                 
            }

        }
    }

InventoryController.cs

 public JsonResult List()
    {
        return Json(invDB.ListAll(), JsonRequestBehavior.AllowGet);
    }

Inventory.js（我如何獲取數據）

function loadData() {
$.ajax({
    url: "/Inventory/List",
    type: "GET",
    contentType: "application/json;charset=utf-8",
    dataType: "json",
    success: function (result) {
        var html = '';
        $.each(result, function (key, item) {
            html += '<tr>';
            html += '<td>' + item.InventoryId + '</td>';
            html += '<td>' + item.Category + '</td>';
            html += '<td>' + item.Name + '</td>';
            html += '<td>' + item.Details + '</td>';
            html += '<td>' + item.Quantity + '</td>';
            html += '<td>' + item.CsbCode + '</td>';
            html += '<td>' + item.Notes + '</td>';
            html += '<td>' + item.Location + '</td>';
            html += '<td>' + dateTimeFormat(item.DateCreated) + '</td>';
            html += '<td>' + dateTimeFormat(item.LastModified) + '</td>';
            html += '<td><a href="#" onclick="return getbyID(' + item.InventoryId + ')">Edit</a> | <a href="#" onclick="Delele(' + item.InventoryId + ')">Delete</a></td>';
            html += '</tr>';
        });
        $('.tbody').html(html);
    },
    error: function (errormessage) {
        alert(errormessage.responseText);
    }
});

}

索引（DataTable腳本）：

    @section scripts {
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.uikit.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#user').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'print'
                ]

            });
        });
    </script>
}

Answer 1

我使用的是1.10 Jquery Datatables，對於模板我使用的是Underscore JS。

這是我從服務器端加載的代碼。

將此模板和表放在您的html代碼中。

<table class="table table-bordered table-condensed" id="tblAccounts"></table>

<script type="text/template" id="tmpl_Grid">
    <td><%= Id %></td>
    <td><%= Amount %></td>
    <td><%= Date %></td>
    <td><%= Type %></td>        
</script>

然后這個方法讓js從服務器端加載數據。

function  Load() {
            var tmpl = _.template($('#tmpl_Grid').html());
            $('#tblAccounts').DataTable({
                "dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
                "paging": true,
                "info": true,
                "ordering": true,
                "search": true,
                "processing": true,
                "serverSide": true,
                "destroy": true,
                "ajax": {
                    "url": "/Accounts/LoadList",
                    "type": "POST",
                    "data": function (d) {
                        d.startDate = $("#txtStartDate").val();
                        d.endDate = $("#txtEndDate").val();
                    }
                },
                "columns": [
                    { "data": null, "title": "ID", "className": "", "orderable": false, "searchable": false },
                    { "data": null, "title": "AMOUNT", "className": "", "orderable": false, "searchable": false },
                    { "data": null, "title": "DATE", "className": "", "orderable": false, "searchable": false },
                    { "data": null, "title": "TYPE", "className": "", "orderable": false, "searchable": false }
                ],
                "order": [[0, "asc"]],
                "rowCallback": function (row, data) {
                    $(row).html(tmpl(data));
                },
                "initComplete": function (settings, json) {

                }
            });
        }

這是控制器的代碼。 我使用EntityFrameword進行數據庫處理，您可以使用自己的方法或技術。

[HttpPost]
        public async Task<JsonResult> LoadList(string startDate, string endDate)
        {
           var search = Request.Form["search[value]"] + "";

            var totalCount = 0;
            var fList = _context.Expenses.Include(x => x.AccountType).AsQueryable();
            if (!string.IsNullOrEmpty(search))
            {
                fList = fList.Where(x => x.Description.ToLower().Trim().Contains(search.ToLower().Trim()));
            }

            var list = await fList.OrderByDescending(x => x.Id).Skip(start).Take(length).Select(x => new
            {
                x.Id,
                x.Amount,
                Date = x.Date != null ? x.Date.Value.ToString("dd-MMM-yyyy") : "",
                Type = x.AccountTypeId != null ? x.AccountType.Name : "",
                x.Description,
                x.BillAmount,
                x.Payment,
                x.AccountTypeId
            }).ToListAsync();

            if (list.Any())
            {
                totalCount = fList.Count();
            }

            var result = JObject.FromObject(new
            {
                draw,
                recordsFiltered = totalCount,
                recordsTotal = totalCount,
                data = list
            });
            return result;
        }

Answer 2

謝謝您的幫助。 我讓它與我在同一個論壇上發現的帖子一致地工作。

我更改了我的代碼以獲取數據。 顯然你需要附加數據，這是讓我的DataTables工作的最重要的事情。

$（“＃user tbody”）。append（html）;

 $.ajax({
    url: "/Artwork/List",
    type: "GET",
    contentType: "application/json;charset=utf-8",
    dataType: "json",
    success: function (result) {

        $.each(result, function (key, item) {
            var html = '';
            html += '<tr>';
            html += '<td>' + item.ArtID + '</td>';
            html += '<td>' + item.Name + '</td>';
            html += '<td>' + item.Details + '</td>';
            html += '<td>' + item.Location + '</td>';
            html += '<td>' + item.Notes + '</td>';          
            html += '<td>' + dateTimeFormat(item.DateCreated) + '</td>';
            html += '<td>' + dateTimeFormat(item.LastModified) + '</td>';
            html += '<td><a href="#" onclick="return getbyID(' + item.ArtID + ')">Edit</a> | <a href="#" onclick="Delele(' + item.ArtID + ')">Delete</a></td>';
            html += '</tr>';
            $("#user tbody").append(html);
        });
        $('#user').DataTable({
            destroy: true,              
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'print',
                    exportOptions: {
                        columns: ':visible' ,
                    }
                },
                'colvis'
            ],
            columnDefs: [{
                visible: false
            }]               
        });

再次謝謝你！