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

I'm trying to bind jQuery DataTable by calling mvc action method using AJAX call and trying to populate the table using JSON data but it gets stuck on loading. Am I missing something?

我试图通过使用AJAX调用mvc操作方法来绑定jQuery DataTable，并尝试使用JSON数据填充表，但加载时它会卡住。我遗漏了什么东西?

Also, how can I implement server side Paging, Searching and Sorting in 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();
    });
    }

Below is my action method:

以下是我的行动方法:

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

Below is the JSON output of this action method:

下面是这个动作方法的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)\/"}]}

Below is the screenshot where it stuck:

下面是它卡住的截屏:

It is calling my action method but unable to bind the JSON data.

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

3 个解决方案

#1

success function - Must not be overridden as it is used internally in DataTables. So remove success function and try once, hope it will help you.

success函数—不能被重写，因为它在datatable内部使用。因此删除成功函数并尝试一次，希望它能帮助你。

#2

DataTables requires json in certain format, look at Ajax tab in DataTables Documentation. Your answer in action don't corresponds to this format. Try to add wrapper class (real or anonymous) with "data" field, which will be your list of objects.

DataTables需要json格式，在DataTables文档中查看Ajax选项卡。你的回答不符合这种格式。尝试在“data”字段中添加包装类(real或anonymous)，这将是您的对象列表。

#3

Few things to take care while implementing server side datatable:

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

Your datatable in view must match number of columns coming with data.
视图中的数据表必须匹配带有数据的列数。
The column names which you are mentioning in datatable should be same as in database table.
您在datatable中提到的列名应该与数据库表中的列名相同。

For implementing server side searching, add in a row textboxes below header row for each column. you need to bind each textbox keyup event for relevent column and pass it to server and rebind datatable

要实现服务器端搜索，请为每列在标题行下面添加行文本框。您需要绑定关联列的每个textbox keyup事件，并将其传递到服务器并重新绑定datatable

#1