Jquery datatable 在从简单的 Web 服务调用 Web 方法时未在表中显示任何数据

Posted 2023-05-09

【中文标题】Jquery datatable 在从简单的 Web 服务调用 Web 方法时未在表中显示任何数据

【英文标题】：Jquery datatable Is showing no data in table on calling a web method from a simple web service

【发布时间】：2017-08-21 05:50:43

【问题描述】：

在调用一个简单的 Web 服务方法时，我在表中没有得到任何数据。我试图使用 datatble 插件将服务器端返回的数据放入 jquery 数据表中。但它没有给我表格标题的表格中的数据。 webservice 方法正在返回 Json 数据，但还添加了一个字符串标签，所以我不确定它是否完全是 Json。可能这可能是问题。我对此很陌生，一直在服务器端工作。在我的工作中，我经常处理 C# 数据表，所以我只需要序列化数据表，而且大多数时候我什至不确定哪个数据库将要返回的列 所以我不能使用任何代表表结构的类文件。有没有办法解决这个问题？？非常感谢任何帮助。

<script src="Scripts/jquery-3.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () 
        $.ajax(
            url: 'UserService.asmx/UserDetails',
            contentType: "application/json; charset=utf-8",
            method: 'post',
            datatype: 'json',
            success: function (data) 
                $('#tbl').dataTable(
                    data: data,
                    columns: [
                     'data': 'UserId' ,
                     'data': 'UserName' ,
                     'data': 'UserPassword' ,
                     'data': 'RoleId' ,
                     'data': 'Gender' ,
                     'data': 'EmailId' ,
                     'data': 'DateOfBirth' ,
                     'data': 'Address' ,
                    ]
                );
            ,
            error: function() 
            alert('Fail!');
        
        );
    );
</script>

而我的服务器端网络服务代码是

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string UserDetails()
    
        DataTable dt = new DataTable();
        dt.TableName = "UserDetails";
        SqlConnection conn;
        SqlCommand cmd;
        string connection = ConfigurationManager.ConnectionStrings["Connstr"].ToString();
        string command = "SELECT * FROM tbl_User";
        using (conn = new SqlConnection(connection))
        
            cmd = new SqlCommand(command, conn);
            cmd.CommandType = CommandType.Text;
            conn.Open();
            cmd.ExecuteNonQuery();
            SqlDataAdapter da = new SqlDataAdapter(command, conn);
            da.Fill(dt);
            conn.Close();
                        
            var js = DataTableToJSONWithJavaScriptSerializer(dt);
        return js;
    

    public string DataTableToJSONWithJavaScriptSerializer(DataTable dt)
        
        JavaScriptSerializer js = new JavaScriptSerializer();
        List<Dictionary<string, object>> parentRow = new List<Dictionary<string, object>>();
        Dictionary<string, object> childRow;
            foreach (DataRow row in dt.Rows)
            
                childRow = new Dictionary<string, object>();
                foreach (DataColumn col in dt.Columns)
                
                    childRow.Add(col.ColumnName, row[col]);
                
                parentRow.Add(childRow);
            
        return js.Serialize(parentRow);
        

webservice方法的输出格式如下。

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<string xmlns="http://tempuri.org/">
["UserId":"XYZ","UserName":"XYX","UserPassword":"XYX@1234","RoleId":1,"Gender":"F","EmailId":"[e-mail]","DateOfBirth":"\/Date(623874600000)\/","Address":"ABC Str. 57",
"UserId":"ANATR","UserName":"ANT","UserPassword":"ABC@1234","RoleId":1,"Gender":"F","EmailId":"[e-mail]","DateOfBirth":"\/Date(-301815000000)\/","Address":"XYZ. 2222",
"UserId":"WOLZA","UserName":"DIS","UserPassword":"AB@1234","RoleId":2,"Gender":"M","EmailId":"[e-mail]","DateOfBirth":"\/Date(379362600000)\/","Address":"ul. JUMP 68"]
</string>

【问题讨论】：

我认为数据表需要没有 xml 包装器的纯 json

没有 XML Wrapper 有什么办法可以得到它吗？我需要序列化查询返回的数据表

【参考方案1】：

我觉得

How to convert datatable to json string using json.net?可以帮你，序列化后，成功回调使用jquery.parsejson

【讨论】：

你试过后发生了什么，你得到了正确的 json 吗？

它给了我空白屏幕。没有输出数据

你追踪过数据吗，可能是null或者使用jquery数据表有问题。

我能够通过将 Web 方法的返回类型更改为 VOID 而不是字符串来获取纯 JSON 数据。不知道它做了什么，但解决了这个问题。但是现在 Jquery ajax 总是会出错而不是成功。但是 Web 服务正在返回 JSON。

您可以添加错误回调并查看您遇到的错误错误： function (xhr, ajaxOptions, throwedError) alert( xhr.responseText);

【参考方案2】：

尝试：

     success: function (data) 
         var d = JSON.parse(data.d);

            $('#tbl').dataTable(data:d, 

等等。