Populating JQuery Datatables with Webservice

I have created a web service in Asp.net

which returns the following

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

      

now i want to fill this data in Jquery

Datatable

here is the 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"
            }
        ]
    });
}});

      

here data.d

shows the following when console.log

called

[{"Id":13,"FirstName":"Mohsin","LastName":"Mustufa","Birthday":"12/11/1990","Phone":null,"Email":"abcd@yahoo.com","UserId":"11"}]

      

webservice

[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);
    }

      

Mistake

Request Unknown parameter 'Id' for Row 0

      

+3


source to share


1 answer


It looks like the data returned by the web service is being interpreted as a string. Try using 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":"abcd@yahoo.com","UserId":"11"}]'
    };
    $('#example').dataTable({
        "aaData": JSON.parse(data.d),
        "aoColumns": [
            {
                "mDataProp": "Id"
            }, {
                "mDataProp": "FirstName"
            }, {
                "mDataProp": "LastName"
            }, {
                "mDataProp": "Birthday"
            }, {
                "mDataProp": "Phone"
            }, {
                "mDataProp": "Email"
            }, {
                "mDataProp": "UserId"
            }
        ]
    });

} );

      

+3


source







All Articles