问jQuery数据表未填充
EN

Stack Overflow用户

提问于 2018-01-05 11:35:21

回答 2查看 618关注 0票数 2

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

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

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

<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、.)。

更新：

如果我用我在post中列出的实际json数组替换了Table.rows.add(结果).draw()中的变量“结果”，那么它将显示数据。我通过放置一个断点并检查“结果”的值来获得json数据，所以我不知道为什么当我使用实际的json数据时，而不是当我传递它“结果”时，它会工作。

jquery

asp.net

datatables

企业复产复工专享

为企业提供海量产品优惠，助力中小企业数字化转型升级

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-01-05 12:01:14

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

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

编辑如果您正在使用update面板，您可以用它绑定js方法，那么您的更改反映。将按钮以函数形式提交代码，并将方法名设置为参数。我希望这是工作

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

票数 1

Stack Overflow用户

发布于 2018-01-12 06:20:00

在这件事上花了很多时间后，我想出了问题的所在。当我将实际的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);
    });
})