DataTables: Mocking Ajax requests

by Dominic Myers

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
<table id="datatable"></table>

JavaScript

var jsonData = {
  "rent": [{
    "_id": "5895a925cf8fd70011ceb6ab",
    "tenantID": "589416dd63998500117d9281",
    "amountPaid": 190,
    "__v": 0,
    "paymentType": "Rent",
    "activeEntry": true,
    "datePaid": "2017-02-11T00:00:00.000Z"
  }, {
    "_id": "5895a91fcf8fd70011ceb6aa",
    "tenantID": "589416dd63998500117d9281",
    "amountPaid": 190,
    "__v": 0,
    "paymentType": "Rent",
    "activeEntry": true,
    "datePaid": "2017-02-04T00:00:00.000Z"
  }, {
    "_id": "5895a916cf8fd70011ceb6a9",
    "tenantID": "589416dd63998500117d9281",
    "amountPaid": 190,
    "__v": 0,
    "paymentType": "Rent",
    "activeEntry": true,
    "datePaid": "2017-01-28T00:00:00.000Z"
  }, {
    "_id": "5895a90ecf8fd70011ceb6a8",
    "tenantID": "589416dd63998500117d9281",
    "amountPaid": 190,
    "__v": 0,
    "paymentType": "Rent",
    "activeEntry": true,
    "datePaid": "2017-01-21T00:00:00.000Z"
  }, {
    "_id": "5895a902cf8fd70011ceb6a7",
    "tenantID": "589416dd63998500117d9281",
    "amountPaid": 190,
    "__v": 0,
    "paymentType": "Rent",
    "activeEntry": true,
    "datePaid": "2017-01-14T00:00:00.000Z"
  }, {
    "_id": "5895a8f8cf8fd70011ceb6a6",
    "tenantID": "589416dd63998500117d9281",
    "amountPaid": 190,
    "__v": 0,
    "paymentType": "Rent",
    "activeEntry": true,
    "datePaid": "2017-01-07T00:00:00.000Z"
  }]
};

let datatable = $("#datatable").DataTable({
  "ajax": {
    "type": "POST",
    "url": "/echo/json/",
    "dataType": "json",
    "dataSrc": "rent",
    "data": {
      "json": JSON.stringify(jsonData)
    }
  },
  "columns": [{
    "title": "Date",
    "data": "datePaid",
    "render": function(d) {
      return moment(d).format("DD-MMM-YYYY")
    }
  }, {
    "title": "Payment",
    "data": "paymentType"
  }, {
    "title": "Amount",
    "data": "amountPaid",
    "render": function(d) {
      return "$" + d
    }
  }, {
    "title": "Balance",
    "render": function() {
      return "$0.00"
    }
  }]
});