jQuery数据表未填充

Posted 2023-05-07

【中文标题】jQuery数据表未填充

【英文标题】：jQuery datatable not populating

【发布时间】：2018-06-15 15:42:06

【问题描述】：

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

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

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

<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：

<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 的样子：

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")" 中检查时的数据：

[
    
        "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”；使用我在帖子中列出的实际 json 数组，然后显示数据。我通过放置一个断点并检查“结果”的值来获取 json 数据，所以我不确定为什么它在我使用实际的 json 数据而不是当我传递它“结果”时起作用。

【问题讨论】：

您能否添加ajax 调用返回的数据的示例字符串，另外您应该以json 格式返回数据，请参阅here

我已经更新了问题并添加了返回的数据和网络服务API。

代码或数据绝对没有问题，它可以立即运行 -> jsfiddle.net/00t2m3bx 所以你的问题出在其他地方......

【参考方案1】：

在您的 Ajax done 方法中替换这一行：

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

编辑 如果您使用的是更新面板，您可以将您的 js 方法与它绑定，然后您的更改就会反映。将您的按钮提交代码放在函数中并将您的方法名称设置为参数。我希望它能工作

<script type="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(YourMethod);
    </script>

【讨论】：

会不会是因为 FacilityName 包含 '&' 字符？

不，与符号& 字符在字符串值中有效。我测试了你发布的数据，它适用于这个答案。

错误建议，因为结果已经是 JSON 格式。这是由dataType: "json" 确保的...这就是为什么JSON.parse() 抛出“无效字符”错误，它得到一个文字 - 而不是它应该的字符串...

好的，至少我知道表和数据设置是正确的。数据表在更新面板中；那会有什么不同吗？有什么建议我应该看的吗？这是我的第一个 jQuery 数据表。

我错过了在页面上添加几个 js 函数来解决页面重新加载时“搜索”文本框消失的问题。为了完整起见，我将其包括在内，以防万一......

【参考方案2】：

在花了很多时间之后，我弄清楚了问题所在。当我将实际的 json 数据传递给 Table.rows.add() 时，会显示数据。所以我知道我传递的“结果”参数有问题。当我查看 Chrome 中返回的响应时，我注意到它正在向其中添加 XML 标记：

<string xmlns="http://tempuri.org/">
[
    
        "Area":"CAPITAL METRO (K)",
        "District":"NORTHERN VIRGINIA",
        ....
    
]
</string>

这就是为什么会显示原始数据，但在我将“结果”参数传递给它时不会显示的原因。

解决方法是像这样更改按钮单击功能：

$("#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);
    );
)