jQuery数据表没有填充

我有一个jQuery数据表，通过Web服务API获取数据。 我可以看到返回的数据格式正确，但表格没有显示数据。

我有一个“提交”按钮，点击提取数据并重绘表格。 我在“成功”函数中放置了一个断点，可以看到json数据。

在aspx页面和数据表定义之上的Javascript（我需要这个js函数，因为数据表顶部的搜索文本框在页面重新加载时不断消失）

 $(function () { bindDataTable(); // bind data table on first page load // bind data table on every UpdatePanel refresh Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable); }); function bindDataTable() { var FacCertDT = $('#tblFacCert').DataTable({ 'bDestroy': true, "bStateSave": true, dom: 'lfrtip', "fnStateSave": function (oSettings, oData) { localStorage.setItem('tblFacCert', JSON.stringify(oData)); }, "fnStateLoad": function (oSettings) { return JSON.parse(localStorage.getItem('tblFacCert')); } }); }  
 
 
 
 
 
Area
 
District
 
MPOO 
 
Facility
 
Type
 
Sub-Type
 
Response Due Date
 
Completed?
 
Completed By
 
Completed On
 
 
 
 
  

页面底部的Javascript：

  Table = $("#tblFacCert").DataTable({ data: [], "aoColumns": [ { "mData": "Area" }, { "mData": "District" }, { "mData": "MPOO" }, { "mData": "FacilityName" }, { "mData": "FacilityType" }, { "mData": "FacilitySubType" }, { "mData": "ResponseDueDate" }, { "mData": "Completed" }, { "mData": "UserName" }, { "mData": "ResponseDate" } ], "pageLength": 15, "deferRender": true, rowCallback: function (row, data) { }, filter: false, info: false, ordering: false, processing: true, retrieve: true }); $("#btnSubmit").on("click", function (event) { $.ajax({ type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", url: "../services/easg.asmx/GetComplianceReportData", cache: false, contentType: "application/json; charset=utf-8", data: "{ 'startDate': '" + $("#tbStartDate").val() + "', 'certID': '" + $('#ddlCertificate').val() + "'}" }).done(function (result) {debugger Table.clear().draw(); Table.rows.add(result).draw(); }).fail(function (jqXHR, textStatus, errorThrown) { alert(textStatus + ' - ' + errorThrown); }); })  

这就是Web服务API的样子：

 namespace FacCert { /// 
 /// Summary description for easg /// 
 [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class easg : System.Web.Services.WebService { [WebMethod] [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)] public string GetComplianceReportData(string startDate, string certID) { DateTime dtStartDate = Convert.ToDateTime(startDate); int iCertItemID = int.Parse(certID); DataTable dt = FacCompliance.GetFacCompliances(dtStartDate, iCertItemID); string JSONresult; JSONresult = JsonConvert.SerializeObject(dt); return JSONresult; } } } 

当我在“on（”click“）”中检查它时，这是数据：

 [ { "Area":"CAPITAL METRO (K)", "District":"NORTHERN VIRGINIA", "MPOO":"Plant", "FacilityName":"DULLES VA P&DC", "FacilityType":"Network Operations", "FacilitySubType":"P&DC", "ResponseDueDate":"2017-12-20T00:00:00", "ResponseDate":"2017-12-30T17:57:35.353", "UserACEID":"XXXXXX", "UserName":"John Doe", "Completed":"Yes", "AreaID":11, "DistrictID":58, "FacID":2261, "FacComplianceID":1 },{ "Area":"CAPITAL METRO (K)", "District":"NORTHERN VIRGINIA", "MPOO":"Plant", "FacilityName":"NORTHERN VA P&DC", "FacilityType":"Network Operations", "FacilitySubType":"P&DC", "ResponseDueDate":"2017-12-20T00:00:00", "ResponseDate":"2017-12-30T18:23:10.86", "UserACEID":"XXXXXX", "UserName":"John Doe", "Completed":"Yes", "AreaID":11, "DistrictID":58, "FacID":2262, "FacComplianceID":4 } ] 

我搜索并尝试了所有建议，但似乎没有解决问题。 我希望有人在这里可以看到我搞砸了。

API返回了一些我没有包含在数据表中的列（例如，AreaID，DistrictID，…）。

更新：

如果我替换Table.rows.add（result）.draw（）中的变量“result”; 使用我在post中列出的实际json数组，然后显示数据。 我通过设置断点并检查“结果”的值来获取json数据，因此我不确定为什么它在我使用实际的json数据时有效，而不是在我传递“结果”时。

Answer 1

在Ajax done方法中替换此行：

 Table.rows.add(JSON.parse(result.d)).draw(); 

编辑如果您使用的是更新面板，则可以将js方法与您的更改反映出来。 在functuon中输入您的按钮提交代码并将您的方法名称设置为参数。 我希望它的工作

Answer 2

花了很多时间在这上面我找出了问题所在。 当我将实际的json数据传递给Table.rows.add（）时，显示了数据。 所以我知道我传递的“结果”参数有问题。 当我查看Chrome中返回的响应时，我注意到它正在添加XML标记：

  [ { "Area":"CAPITAL METRO (K)", "District":"NORTHERN VIRGINIA", .... } ]  

这就是原始数据显示的原因，但是当我将“result”参数传递给它时。

解决方法是更改​​按钮单击function，如下所示：

 $("#btnSubmit").on("click", function (event) { $.ajax({ type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", url: "../services/easg.asmx/GetComplianceReportData", cache: false, data: "{ 'startDate': '" + $("#tbStartDate").val() + "', 'certID': '" + $('#ddlCertificate').val() + "'}" }).done(function (result) { Table.clear().draw(); jResult = JSON.parse(result.d); <--- This is the fix Table.rows.add(jResult).draw(); }).fail(function (jqXHR, textStatus, errorThrown) { alert(textStatus + ' - ' + errorThrown); }); })