title: Jquery populate datatable with data from database
body: <p>I'm trying to fill a datatable with data from an access database with ODBC. I need to do this with ajax to call a function from my asp.net web form as a json string but I'm getting a circular reference was detected while serializing an object error.</p>
  
  <p>Below is my html and web form code:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Employee.aspx.cs" Inherits="Login.Employee" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head runat="server"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" /&gt;
          &lt;script type="text/javascript" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function () {
                  $.ajax({
                      url: 'Employee.aspx/GetEmployee',
                      type: 'GET',
                      contentType: 'application/json; charset=utf-8',
                      datatype: 'json',
                      success: function (data) {
                          $('#datatable').dataTable({
                              data: data,
                              columns: [
                                  { 'data': 'ID' },
                                  { 'data': 'picture' },
                                  { 'data': 'last_name' },
                                  { 'data': 'first_name' },
                                  { 'data': 'job_tile' },
                                  { 'data': 'start_date' },
                                  { 'data': 'end_date' }
                              ]
                          });
                      }
                  });
              });
          &lt;/script&gt;
          &lt;title&gt;&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form id="form1" runat="server"&gt;
              &lt;table id="datatable"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;ID&lt;/th&gt;
                          &lt;th&gt;Picture&lt;/th&gt;
                          &lt;th&gt;Last Name&lt;/th&gt;
                          &lt;th&gt;First Name&lt;/th&gt;
                          &lt;th&gt;Job Position&lt;/th&gt;
                          &lt;th&gt;Start Date&lt;/th&gt;
                          &lt;th&gt;End Date&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
              &lt;/table&gt;
              &lt;div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>web form:</p>
  
  <pre><code>public static string MyConnection = "DSN=myAccess2";
  public OdbcConnection MyConn = new OdbcConnection(MyConnection);
  OdbcCommand myCommand;
  OdbcDataAdapter adapter;
  
  [WebMethod]
  public void GetEmployee() 
  {
      List&lt;Employees&gt; emp = new List&lt;Employees&gt;();
      var query = "SELECT * FROM employee";
      MyConn = new OdbcConnection(MyConnection);
      myCommand = new OdbcCommand(query, MyConn);
      MyConn.Open();
      OdbcDataReader reader = myCommand.ExecuteReader();
      while (reader.Read()) 
      {
          Employees empl = new Employees();
          empl.Id = Convert.ToInt32(reader["ID"]);
          empl.image = reader["picture"].ToString();
          empl.lastName = reader["last_name"].ToString();
          empl.firstName = reader["first_name"].ToString();
          empl.jobTitle = reader["job_title"].ToString();
          empl.StartDate = Convert.ToDateTime(reader["start_date"]);
          empl.EndDate = Convert.ToDateTime(reader["end_date"]);
          emp.Add(empl);
      }
  
      MyConn.Close();
      JavaScriptSerializer js = new JavaScriptSerializer();
      Context.Response.Write(js.Serialize(emp));
  }
  </code></pre>
  
  <p>Any help is appreciated, thanks!</p>