title: Spring MVC + jQuery datatables + thymeleaf + AJAX
body: <p>Can anybody point out where have I done wrong in here? I keep getting the `DataTables warning: table id=usersTable - Ajax error.</p>
  
  <p>Ajax request : </p>
  
  <pre><code>&lt;script th:inline="javascript"&gt;
  
  $(document).ready(function () {
      $('#usersTable').DataTable({
          "searching": true,
          "serverSide": true,
          "sAjaxSource": "/list",
          "columns": [
              {"data": "username"},
              {"data": "firstName"},
              {"data": "lastName"},
              {"data": "status"},
              {"data": "role"}
          ]
      })
  });
  </code></pre>
  
  <p></p>
  
  <p>Controller : </p>
  
  <pre><code>    @RequestMapping(value = "/list", method = RequestMethod.GET, produces = "application/json")
  @ResponseBody
  public List&lt;User&gt; listOfUsers() {
      List&lt;User&gt; usersList;
      usersList = userService.getAllUsers();
      return usersList;
  }
  </code></pre>
  
  <p>UI :</p>
  
  <pre><code>       &lt;div class="table-responsive"&gt;
                      &lt;table id="usersTable" class="table table-bordered table-hover dataTable"&gt;
                          &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th th:text="#{user.table.heading.username}"&gt;User Name&lt;/th&gt;
                              &lt;th th:text="#{systemUser.table.heading.firstname}"&gt;First Name&lt;/th&gt;
                              &lt;th th:text="#{systemUser.table.heading.lastname}"&gt;Last Name&lt;/th&gt;
                              &lt;th th:text="#{systemUser.table.heading.status}"&gt;Status&lt;/th&gt;
                              &lt;th th:text="#{systemUser.table.heading.role}"&gt;Role&lt;/th&gt;
                          &lt;/tr&gt;
                          &lt;/thead&gt;
  
                      &lt;/table&gt;
                  &lt;/div&gt;
  </code></pre>