JSon 返回一串 HTML table 以显示在 jQuery datatable 的 fnopen 中
Posted
技术标签:
【中文标题】JSon 返回一串 HTML table 以显示在 jQuery datatable 的 fnopen 中【英文标题】：JSon returning a string of HTML table to be displayed in the fnopen of jQuery datatable 【发布时间】：2012-01-27 08:31:57 【问题描述】：一个多月以来，我一直在努力寻找这个问题的答案，但到目前为止还没有运气。 所以我开始了这项工作。
我有一个显示解析器案例负载的 jQuery 数据表。
-
索赔 ID
索赔人姓名
索赔状态
最后修改日期
未完成事件总数
最后的日记笔记
索赔详情弹出 img
我的问题是，在运行时我生成了两组按钮，一组用于显示未完成事件的详细信息，第二组用于显示索赔人的详细信息。
在我不得不从服务器端获取出色的事件详细信息并使用 html 和进一步的 jQuery 为表格设置动画之前，一切都很糟糕。
我读了很多，我得到的最接近的是 MVC，它不能解决问题。
所以我开始使用 html 标记和内联 jquery 创建一个字符串，以便从 JSON 服务传回。效果很好，动画也可以。
现在的问题是我将它部署到服务器时。它停止工作。 HTML 标记在那里，并且标题正在显示，但没有实际数据。我检查了 SQL 查询，它正在返回数据。我已经在调试模式下检查了内联字符串，它看起来也很好。
我不知道为什么它在服务器上不起作用，以及是否有任何其他“更好”的方法可以做到这一点。
任何帮助将不胜感激。在此先感谢
代码（数据表）
<div class="EventDetailsTable">
<asp:Repeater ID="TestRepeater" runat="server">
<HeaderTemplate>
<table id="tblOverDueCases" cellpadding="0" cellspacing="0" border="0" class="display">
<thead>
<tr>
<th>
Claim Ref
</th>
<th>
Claimant
</th>
<th>
Last Action
</th>
<th>
Status
</th>
<th>
Events
</th>
<th>
Notes
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("Claim Ref") %>
</td>
<td>
<%# Eval("Claimant") %>
</td>
<td>
<%# Eval("[Last Action]")%>
<%# Eval(" [Last Action Time]")%>
</td>
<td>
<%# Eval("[Status]")%>
</td>
<td class="center"> <%--JCTEST AddedControl center class--%>
<%# Eval("[NoE]")%>
</td>
<td class="center">
<%# (String.IsNullOrEmpty(Eval("[Latest Diary Note]").ToString()) ? "n/a" : "<img id='imgDiaryNote' src='Images/DiaryIcon.png' alt='noDiaryNote' />")%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody> </table>
</FooterTemplate>
</asp:Repeater>
</div>
代码 (jQuery)
$(document).ready(function ()
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '<img id="btnEventDet" src="Images/details_open.png" />';
nCloneTd.className = "center";
var nCloneTh2 = document.createElement('th');
var nCloneTd2 = document.createElement('td');
nCloneTd2.innerHTML = '<img id="btnClaimInfo" src="Images/InfoIcon.png" />';
nCloneTd2.className = "center";
$('#tblOverDueCases thead tr').each(function ()
this.insertBefore(nCloneTh, this.childNodes[0]);
this.insertBefore(nCloneTh2, this.childNodes[14]);
);
/*hack to display the info column as the last col*/
$('#tblOverDueCases tbody tr').each(function ()
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
this.insertBefore(nCloneTd2.cloneNode(true), this.childNodes[14]);
);
var oTable = $('#tblOverDueCases').dataTable(
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [
[10, 25, 50,-1],
[10, 25, 50,"All"]
]
);
$('#btnEventDet').live('click', function ()
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close'))
/* This row is already open - close it */
this.src = "Images/details_open.png";
oTable.fnClose(nTr);
/*change background color*/
unfocusRow(nTr);
else if (this.src.match('details_open'))
/*collapse all open rows*/
$('table img').each(function (event)
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close'))
/* This row is already open - close it */
this.src = "Images/details_open.png";
oTable.fnClose(nTr);
/*Change the highlight back to the orginal colors*/
unfocusRow(nTr);
);
/* Open this row */
this.src = "Images/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
/*Highlight and bold the selected row*/
focusRow(nTr);
);
/*test diary note button*/
var highlightRow;
$('#imgDiaryNote').live('click', function ()
var nTr = this.parentNode.parentNode;
highlightRow = nTr;
var aData = oTable.fnGetData(nTr);
var sOut = aData[1];
$.ajax(
type: "POST",
url: "DiaryView.aspx/GetDiaryNote",
data: "'leadID': " + sOut + "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg)
$('#lbDiaryNote').text(msg.d);
//centering with css
centerPopup("#DNWindow", '#backGroundDiaryNote');
//load popup
loadPopup("#DNWindow", '#backGroundDiaryNote');
//highlight row
focusRow(highlightRow);
);
);
function fnFormatDetails(oTable, nTr)
var aData = oTable.fnGetData(nTr);
var sOut = aData[1];
$.ajax(
type: "POST",
url: "DiaryView.aspx/GetData",
data: "'leadID': " + sOut + "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg)
oTable.fnOpen(nTr, msg.d, 'details');
);
return "";
代码（JSON）
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string GetData(int leadID)
#region string table code
OverDueEvents overDueEvent = new OverDueEvents();
DataSet ds = Query_OverdueEvents.Instance.OverdueEvents(followUpTime, userID, leadTypeID, leadID);
DataSet innerDs = new DataSet();
int count = ds.Tables[0].Rows.Count;
StringBuilder returnString = new StringBuilder();
returnString.AppendLine(GenerateJQueryAndHTML.Instance.GenEventDetailsSubTablejQuery());
returnString.AppendLine(GenerateJQueryAndHTML.Instance.GenEventSubTableHeaders());
List<OverDueEvents> listOverDueClaims = new List<OverDueEvents>();
for (int i = 0; i < count; i++)
overDueEvent = new OverDueEvents();
overDueEvent.OverDueClaim.LeadID = (int)ds.Tables[0].Rows[i].ItemArray[0];
overDueEvent.LeadEventID = ds.Tables[0].Rows[i].ItemArray[1].ToString();
overDueEvent.OverDueEvent.EventID = (int)ds.Tables[0].Rows[i].ItemArray[2];
overDueEvent.OverDueEvent.FollowUpTime = overDueEvent.OverDueEvent.GetFollowUpTime(overDueEvent.OverDueEvent.EventID);
overDueEvent.OverDueEvent.EventName = ds.Tables[0].Rows[i].ItemArray[3].ToString();
overDueEvent.EventActioned = ds.Tables[0].Rows[i].ItemArray[4].ToString();
overDueEvent.EventDueDate = ds.Tables[0].Rows[i].ItemArray[5].ToString();
overDueEvent.DaysOverDue = (int)ds.Tables[0].Rows[i].ItemArray[6];
innerDs = Query_NextPossibleEvents.Instance.GetNextPossibleEvents(followUpTime, userID, leadTypeID, leadID, overDueEvent.OverDueEvent.EventID);
for (int nextEventCount = 0; nextEventCount < innerDs.Tables[0].Rows.Count; nextEventCount++)
Events nextAction = new Events();
nextAction.EventName = innerDs.Tables[0].Rows[nextEventCount].ItemArray[1].ToString();
overDueEvent.NextActions.Add(nextAction);
listOverDueClaims.Add(overDueEvent);
int panelID = 1;
foreach (var events in listOverDueClaims)
returnString.AppendLine(GenerateJQueryAndHTML.Instance.GenEventSubTableCol(panelID, events.OverDueEvent.EventName));
panelID++;
returnString.AppendLine(GenerateJQueryAndHTML.Instance.GenOutTableClosingTags());
int panelCount = 1;
foreach (var overDueEvents in listOverDueClaims)
returnString.AppendLine(GenerateJQueryAndHTML.Instance.GenNextEventTable(panelCount, overDueEvents));
panelCount++;
returnString.AppendLine(GenerateJQueryAndHTML.Instance.GenEventSubTableClosingTags());
return returnString.ToString();
#endregion
【问题讨论】：
一点代码会有很大帮助。 如果您也想查看自定义 html gen 函数，请告诉我...再次提前感谢 【参考方案1】：我发现您的 jquery 代码存在两个问题。第一个是“数据”参数需要一个实际的 js 对象，而不是字符串化的对象。第二个，我在这里可能错了，你显然是在使用你的 web 方法和一个 asPx 文件。据我所知，这些应该与 asMx 文件一起使用。
$.ajax(
type: "POST",
url: "DiaryView.aspx/GetData", //Not sure if an ASPX can have a web method. I always use an ASMX for these.
//data: "'leadID': " + sOut + "", //data is an actual object, not a stringified json object use:this instead.
data:
'leadID': sOut
,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg)
oTable.fnOpen(nTr, msg.d, 'details');
);
希望这会有所帮助。
【讨论】：
aspx 服务工作正常。问题出在静态 Web 方法上。每次新用户登录时，它都会不断变化。由于这些服务是实时的，并且在单击加图像时会调用它们，因此它们失败了，因为更新的用户 ID 没有分配给它的案例。以上是关于JSon 返回一串 HTML table 以显示在 jQuery datatable 的 fnopen 中的主要内容，如果未能解决你的问题，请参考以下文章
php json - 以返回的数组顺序显示问题（json 排序）
jquery之从ajax获取json数据以表格的形式显示在页面上
DB::table Select() 以字符串形式返回数组 Laravel
有没有办法以从 django 视图中作为上下文传递的一种很好的方式在 html 中显示 json 结果？