title: Populating Jquery Datatables with Webservice
body: <p>i have created a webservice in <code>Asp.net</code> which is returning the following</p>
  
  <pre><code>&lt;string xmlns="http://tempuri.org/"&gt;[{"Id":13,"FirstName":"Mohsin","LastName":"Mustufa","Birthday":"12/11/1990","Phone":null,"Email":"abcd@yahoo.com","UserId":"11"}]
  </code></pre>
  
  <p></p>
  
  <p>now i want to populate that data in <code>Jquery</code> <code>Datatable</code></p>
  
  <p>here is the HTML</p>
  
  <pre><code>&lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;FirstName&lt;/th&gt;
              &lt;th&gt;LastName&lt;/th&gt;
              &lt;th&gt;Birthday&lt;/th&gt;
              &lt;th&gt;Phone&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;UserId&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;FirstName&lt;/th&gt;
              &lt;th&gt;LastName&lt;/th&gt;
              &lt;th&gt;Birthday&lt;/th&gt;
              &lt;th&gt;Phone&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;UserId&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$.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"
              }
          ]
      });
  }});
  </code></pre>
  
  <p>here <code>data.d</code> is showing the following when <code>console.log</code> is called</p>
  
  <pre><code>[{"Id":13,"FirstName":"Mohsin","LastName":"Mustufa","Birthday":"12/11/1990","Phone":null,"Email":"abcd@yahoo.com","UserId":"11"}]
  </code></pre>
  
  <p><strong>webservice</strong></p>
  
  <pre><code>[WebMethod]
      [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
      public string ContactsList()
      {
  
          var contacts = new List&lt;ContactsModel&gt;();
          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);
      }
  </code></pre>
  
  <p><strong>Error</strong></p>
  
  <pre><code>Request Unknown parameter 'Id' for Row 0
  </code></pre>