title: DataTables: Custom Response Handling
body: <p>I started working on <a href="https://angularjs.org/" rel="noreferrer"><code>AngularJS</code></a> and <a href="https://datatables.net/" rel="noreferrer"><code>DataTables</code></a> and wonder whether it is possible to customize the response <code>DataTables</code> is expecting. The current expectation of the DataTables plugin is something like this:</p>
  
  <pre><code>{
      "draw": 1,
      "recordsTotal": 57,
      "recordsFiltered": 5,
      "data": [...]
  }
  </code></pre>
  
  <p>On the server end, the API's are being handled by <a href="https://github.com/toastdriven/django-tastypie" rel="noreferrer"><code>django-tastypie</code></a></p>
  
  <p>The response from server is: </p>
  
  <pre><code>{
       meta: {
          limit: 20,
          next: null,
          offset: 0,
          previous: null,
          total_count: 2
       },
  
       objects: [...]
   }
  </code></pre>
  
  <p>So, is there a way to tweak Datatables Plugin to accept/map this response, or I'll have to find a way to add expected fields to the api?</p>
  
  <p>So far I've done this:</p>
  
  <pre><code>    var deptTable = angular.element('#deptManagementTable').DataTable({
          processing: true,
          serverSide: true,
          pagingType: "simple_numbers",
          ajax: {
              url: "/client/api/v1/departments/",
              data: function(d) {
                  d.limit = d.length;
                  d.offset = d.start;
                  d.dept_name__icontains = d.search.value;
              },
              dataSrc: function(json) {
                  for (var i=0, len=json.objects.length ; i&lt;len ; i++) {
                      json.objects[i].DT_RowId = json.objects[i].dept_id;
                  }
                  return json.objects;
              }
          },
          aLengthMenu: [
              [5, 25, 50, 100],
              [5, 25, 50, 100]
          ],
          iDisplayLength: 5,
          columns: [
              {
                  data: "dept_name"
              },
              {
                  data: "dept_created_on",
                  render: function ( data, type, full, meta ) {
                      var dateCreated = new Date(data);
                      dateCreated = dateCreated.toLocaleDateString();
                      return dateCreated;
                  }
              }
          ]
      });
  </code></pre>
  
  <p>Any help will be appreciated.</p>
  
  <p>Thanks in Advance :) </p>