使用Webservice填充Jquery数据表 [英] Populating Jquery Datatables with Webservice

问题描述

我在Asp.net中创建了一个Web服务，该服务返回以下内容

i have created a webservice in Asp.net which is returning the following

<string xmlns="http://tempuri.org/">[{"Id":13,"FirstName":"Mohsin","LastName":"Mustufa","Birthday":"12/11/1990","Phone":null,"Email":"[e-mail]","UserId":"11"}]

现在我要在Jquery Datatable

这是HTML

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Birthday</th>
            <th>Phone</th>
            <th>Email</th>
            <th>UserId</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Id</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Birthday</th>
            <th>Phone</th>
            <th>Email</th>
            <th>UserId</th>
        </tr>
    </tfoot>
</table>

jQuery

$.ajax({
type: 'POST',
url: 'ws.asmx/ContactsList',
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
    //alert(data.d);
    $('#example').dataTable({
        "aaData": data.d,
        "aoColumns": [
            {
                "mDataProp": "Id"
            }, {
                "mDataProp": "FirstName"
            }, {
                "mDataProp": "LastName"
            }, {
                "mDataProp": "Birthday"
            }, {
                "mDataProp": "Phone"
            }, {
                "mDataProp": "Email"
            }, {
                "mDataProp": "UserId"
            }
        ]
    });
}});

此处data.d在调用console.log时显示以下内容

here data.d is showing the following when console.log is called

[{"Id":13,"FirstName":"Mohsin","LastName":"Mustufa","Birthday":"12/11/1990","Phone":null,"Email":"[e-mail]","UserId":"11"}]

网络服务

[WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string ContactsList()
    {

        var contacts = new List<ContactsModel>();
        var conn = ConfigurationManager.ConnectionStrings["AccountsConnectionString"].ConnectionString;
        using (var con = new SqlConnection(conn))
        {
            con.Open();
            const string query = "SELECT [Id], [F_name], [L_name], [Phone], [Birthday], [Email], [User_id] FROM [Contacts]";
            var cmd = new SqlCommand(query, con);
            var reader = cmd.ExecuteReader();
            while (reader.Read())
            {
                var model = new ContactsModel();
                model.Id = Convert.ToInt32(reader["Id"].ToString());
                model.FirstName = reader["F_name"].ToString();
                model.LastName = reader["L_name"].ToString();
                model.Birthday = reader["Birthday"].ToString();
                model.Email = reader["Email"].ToString();
                model.UserId = reader["User_id"].ToString();
                contacts.Add(model);
            }
        }
        return new JavaScriptSerializer().Serialize(contacts);
    }

错误

Request Unknown parameter 'Id' for Row 0

推荐答案

似乎Web服务返回的数据被解释为字符串.尝试使用JSON.parse(data.d)

Seems that data returned by the web service are interpreted as string. Try to use JSON.parse(data.d)

http://plnkr.co/edit/JGzCNT6Zg73xtFwAUuOx?p=preview

$(document).ready(function() {
    var data = {
      d : '[{"Id":13,"FirstName":"Mohsin","LastName":"Mustufa","Birthday":"12/11/1990","Phone":null,"Email":"[e-mail]","UserId":"11"}]'
    };
    $('#example').dataTable({
        "aaData": JSON.parse(data.d),
        "aoColumns": [
            {
                "mDataProp": "Id"
            }, {
                "mDataProp": "FirstName"
            }, {
                "mDataProp": "LastName"
            }, {
                "mDataProp": "Birthday"
            }, {
                "mDataProp": "Phone"
            }, {
                "mDataProp": "Email"
            }, {
                "mDataProp": "UserId"
            }
        ]
    });

} );

这篇关于使用Webservice填充Jquery数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！