JSon返回一个字符串的HTML表，将显示在jQuery数据表的fopen中

本文关键字：显示 jQuery fopen 数据表 HTML 返回字符串一个 JSon | 更新日期: 2023-09-27 18:18:41

一个多月来我一直在努力寻找这个问题的答案，到目前为止还没有运气。所以我开始了这个工作。

我有一个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
}

JSon返回一个字符串的HTML表，将显示在jQuery数据表的fopen中

我看到两个jquery代码的问题。首先，'data'参数需要一个实际的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');
    }
});