====== DataTables Rendering Column with Row Data ======
It is possible for us to customize how the column is begin render by using columnDefs like:
<code>
var table = $("#table").DataTable({
	dom: 'rti',
	pageLength: -1,
        order: [[0, "asc"]],
        columnDefs: [
           {
               "targets": 0,
               "render": function (data, type, row) {
                  if (data === "Active") {
                     return '<span class="active">Active</span>';
                  }
                  else {
                     return '<span style="background-color:#d21605">Inactive</span>';
                  }
               }
           },
           {
               "targets": 1,
               "render": function (data, type, row) {
                  return '<span style="background-color:#d21605">' + data + ' at row ' + row + '</span>'
               }
           }
        ]
});
</code>

In this example, we use columnDefs to customize the first two columns, with ''targets'' for the index of column, and a render function. The render function has two parameters. ''data'' is the data that originally display on the table, the type is the type of the data, and the row of the row index. The function return the HTML code for the corresponding table cell.