Question

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

另外，如何在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

成功函数 - 不得覆盖，因为它在DataTables内部使用。所以删除成功功能并尝试一次，希望它能帮到你。

Answer 2

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

Answer 3

实现服务器端数据表时要注意的事项很少：

您在视图中的数据表必须与包含数据的列数匹配。
您在datatable中提及的列名应与数据库表中的相同。

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

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

3 个答案: