无法将 AJAX 调用中的 jQuery DataTable 与 JSON 数据绑定

Question

我正在尝试通过使用 AJAX 调用调用 mvc 操作方法并尝试使用 JSON 数据填充表来绑定 jQuery DataTable，但它在加载时卡住了。我错过了什么吗？

另外，如何在 jQuery DataTable 中实现服务器端分页、搜索和排序。

function initDataTable(ClientId)
    {
        var assetListVM;
        $(function () {
            assetListVM = {
                dt: null,

                init: function () {
                    var ClientId = $('#ddlClient').val();
                    dt = $('#records-data-table').dataTable({
                        "serverSide": true,
                        "processing": true,
                        "ajax": {
                            "type": "POST",
                            "dataType": "json",
                            "url": "@Url.Action("GetProcessingData", "Processing")?clientId=" + ClientId,
                            "success": function (data) {
                                alert(data);
                                console.log(data);

                            },
                            "error": function(){
                                alert("Error");
                            }

                    },
                        "columns": [
                            { "title": "Co Num",
                            "data": "CompanyNo",
                                "searchable": true },
                            { "title": "Cycle Date",
                            "data": "CycleDate",
                                "searchable": true },
                            { "title": "Policy Number",
                            "data": "PolicyNo",
                                "searchable": true },
                            { "title": "Issue Date",
                            "data": "IssueDate",
                                "searchable": true },
                            { "title": "Transaction Date",
                            "data": "TransactionDate"
                            },
                            { "title": "Transaction Amt",
                            "data": "TransactionAmount"
                            },
                            { "title": "Item Code",
                            "data": "ItemCode"
                            },
                                { "title": "Account",
                                "data": "Account"
                                },
                                { "title": "Owner Name",
                                "data": "OwnerName"
                                }

                        ],
                        "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
                        });
        }
        }

    // initialize the datatables
    assetListVM.init();
    });
    }

下面是我的操作方法：

public ActionResult GetProcessingData(int clientId)
    {
        ClientSummary ClientSUM = new ClientSummary();
        List<PolicyDownload> LstPData = new List<PolicyDownload>();
        DataTable dtProcessingData = new DataTable();
        try
        {
            using (DLpolicyDownload objDLpolicyDownload = new DLpolicyDownload())
            {
                dtProcessingData = objDLpolicyDownload.GetProcessingRecordDetails(clientId);
                if (dtProcessingData != null)
                {
                    foreach (DataRow dr in dtProcessingData.Rows)
                    {
                        PolicyDownload pData = new PolicyDownload();
                        pData.CompanyNo = Convert.ToInt32(dr["CO_NUM"]);
                        pData.CycleDate = Convert.ToString(dr["CYCLE_DATE"]);
                        pData.PolicyNo = Convert.ToString(dr["POLICY_NUMBER"]);
                        pData.IssueDate = Convert.ToString(dr["ISSUE_DATE"]);
                        pData.TransactionDate = Convert.ToString(dr["TRANSACTION_DATE"]);
                        pData.TransactionAmount = Convert.ToDouble(dr["TRANSACTION_AMOUNT"]);
                        pData.ItemCode = Convert.ToInt32(dr["ITEM_CODE"]);
                        pData.Account = Convert.ToString(dr["ACCOUNT"]);
                        pData.OwnerName = Convert.ToString(dr["OWNER_NAME"]);
                        LstPData.Add(pData);
                    }
                }
            }
        }
        catch (Exception ex)
        {
            if (logChoice)
            {
                log.Error(ex.Message, ex);
            }
        }
        var data = from s in LstPData
                   select s;
        return Json(new { data = data }, JsonRequestBehavior.AllowGet);
    }

以下是此操作方法的 JSON 输出：

{"data":[{"PolicyDownloadID":0,"ImportDate":null,"CycleDate":"10/23/2017","CompanyID":0,"CompanyNo":40,"PolicyNo":"L0000001","PlanCode":null,"InsuranceType":null,"IssueDate":"05/02/2011","TransactionDate":"08/03/2017","TransactionAmount":7545.59,"ItemCode":0,"Account":"SBEN","Mode":null,"ModeAmount":0,"PayerName":null,"OwnerName":"CERNY, RAYMOND C","InsuredName":null,"PayeeName":null,"JointOwner":null,"SBC":0,"SBCAmount":0,"IsActive":false,"CreatedOn":"\/Date(-62135575200000)\/"},{"PolicyDownloadID":0,"ImportDate":null,"CycleDate":"10/23/2017","CompanyID":0,"CompanyNo":6,"PolicyNo":"FGL01234","PlanCode":null,"InsuranceType":null,"IssueDate":"07/23/2010","TransactionDate":"08/02/2017","TransactionAmount":26999.62,"ItemCode":0,"Account":"SBEN","Mode":null,"ModeAmount":0,"PayerName":null,"OwnerName":"BURNHAM, STEVEN L","InsuredName":null,"PayeeName":null,"JointOwner":null,"SBC":0,"SBCAmount":0,"IsActive":false,"CreatedOn":"\/Date(-62135575200000)\/"}]}

下面是卡住的截图：

它正在调用我的操作方法，但无法绑定 JSON 数据。

Answer 1

success 函数 - 不能被覆盖，因为它在 DataTables 内部使用。 所以去掉成功功能，试一次，希望对你有帮助。

Answer 2

DataTables 需要特定格式的 json，请查看 DataTables Documentation 中的 Ajax 选项卡。您的实际答案不符合这种格式。 尝试使用“数据”字段添加包装类（真实或匿名），这将是您的对象列表。

Answer 3

在实现服务器端数据表时需要注意的几件事：

1. 视图中的数据表必须与数据随附的列数匹配。
2. 您在数据表中提到的列名应与数据库表中的相同。

为了实现服务器端搜索，在每列的标题行下方添加一行文本框。您需要为相关列绑定每个文本框 keyup 事件并将其传递给服务器并重新绑定数据表