jQuery数据表未填充 [英] jQuery datatable not populating
问题描述
我有一个jQuery数据表，可通过Web服务API获取数据.我可以看到返回的数据格式正确，但是表格未显示数据.
I have a jQuery data table, getting data through web service API. I can see the data returned is in correct format but the table is not displaying the data.
我有一个提交"按钮，单击该按钮可提取数据并重绘表.我在成功"函数中设置了一个断点，可以看到json数据.
I have a "Submit" button that on click fetches the data and redraws the table. I put a breakpoint in "success" function and can see the json data.
aspx页面顶部的Javascript和数据表定义(我需要此js函数，因为数据表顶部的搜索"文本框在重新加载页面时一直消失)
Javascript on top of the aspx page and data table definition (I needed this js functions because the Search text box on top the datatable kept disappearing on page reloads)
<script>
$(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'));
}
});
}
</script>
<div runat="server" id="divFacCert" ClientIDMode="Static" style="padding:15px">
<div class="table-responsive">
<table id="tblFacCert" class="table table-striped table-bordered table-hover">
<thead>
<tr class="info">
<th>Area</th>
<th>District</th>
<th>MPOO </th>
<th>Facility</th>
<th>Type</th>
<th>Sub-Type</th>
<th>Response Due Date</th>
<th>Completed?</th>
<th>Completed By</th>
<th>Completed On</th>
</tr>
</thead>
</table>
</div>
</div>
页面底部的Javascript:
Javascript at the bottom of the page:
<script>
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);
});
})
</script>
这是Web服务API的外观:
This is what the web service API looks like:
namespace FacCert
{
/// <summary>
/// Summary description for easg
/// </summary>
[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")中查看的数据:
This is the data when I examine it in "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
}
]
我已经搜索并尝试了所有建议，但似乎没有任何方法可以解决该问题.我希望这里的人可以看到我在搞砸.
I have searched and tried all suggestions but nothing seems to fix the problem. I am hoping someone here can see where I am messing up.
我在数据表中未包含API返回的一些列(例如AreaID，DistrictID等).
There are a few columns returned by API that I am not including in the data table (e.g. AreaID, DistrictID, ...).
更新:
如果我替换Table.rows.add(result).draw();中的变量"result"；与我在帖子中列出的实际json数组，然后它显示数据.我通过放置一个断点并检查"result"的值来获取json数据，所以我不确定为什么当我使用实际的json数据而不是通过"result"时为什么它可以工作.
if I replace the variable "result" in Table.rows.add(result).draw(); with actual json array that I have listed in the post, then it displays the data. I got the json data by putting a breakpoint and examining the value of "result", so i am not sure why it works when I use the actual json data and not when I pass it "result".
推荐答案
在Ajax done方法中替换以下行:
Replace this line in your Ajax done method:
Table.rows.add(JSON.parse(result.d)).draw();
修改 如果您使用的是更新面板，则可以将其与js方法绑定在一起，然后您的更改就会反映出来.将您的按钮提交代码放在functuon中，并将您的方法名称设置为参数.我希望它能正常工作
Edit If you are using update panel you can bind your js method with that then your change reflect. put you your button submit code in functuon and set your method name as parameter. i hope it's work
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(YourMethod);
</script>
这篇关于jQuery数据表未填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
