CODEWITHSUNDEEP
jquerydatatabledatatables
Vixed
Vixed

Reputation: 3509

DataTable class from json response

I'm trying to add a class to the cell from a json (API), but this renders:

<td class="status_id">active</td>

instead of <td class="up">active</td>

Here what I tried so far:

var dataSet= [{
    "id": 1,
    "name": "Mario Bros",
    "timestamp": 1533552555,
    "status": "active",
    "status_id": "up"
  }, {
    "id": 2,
    "name": "Luigi Bros",
    "timestamp": 1533552556,
    "status": "inactive",
    "status_id": "dw"
  }
];

$('table').DataTable({
  data:dataSet,
  columns: [
      {data:"id"},
      {data:"name"},
      {data:"timestamp"},
      {data:"status",class:"status_id"}
  ],
  processing:false,paging:true,searching:false,ordering:true,info:false,paging:false
});
table{width:100%}
td{border:1px solid #000;width:25%}
.dw{background:red;color:#FFF}
.up{background:green;color:#FFF}
<link href="//cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<table></table>

Upvotes: 1

Views: 104

Answers (2)

davidkonrad
davidkonrad

Reputation: 85538

I would use createdCell :

columns: [
  { data: "id" },
  { data: "name" },
  { data: "timestamp" },
  { data: "status",
    createdCell: function( cell, cellData, rowData) {
       $(cell).addClass(rowData.status_id)
    }
  }
]

http://jsfiddle.net/cxg1875r/

Upvotes: 1

Vixed
Vixed

Reputation: 3509

It works with the following code, but I don't believe that's the best solution.

var dataSet= [{
    "id": 1,
    "name": "Mario Bros",
    "timestamp": 1533552555,
    "status": "active",
    "status_id": "up"
  }, {
    "id": 2,
    "name": "Luigi Bros",
    "timestamp": 1533552556,
    "status": "inactive",
    "status_id": "dw"
  }
];

$('table').DataTable({
  data:dataSet,
  columns: [
      {data:"id"},
      {data:"name"},
      {data:"timestamp"},
      {data:"status"}
  ],
  rowCallback: function(row, data, index) {
    $('td:eq(3)', row).addClass(data.status_id);
  },
  processing:false,paging:true,searching:false,ordering:true,info:false,paging:false
});
table{width:100%}
td{border:1px solid #000;width:25%}
.dw{background:red;color:#FFF}
.up{background:green;color:#FFF}
<link href="//cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<table></table>

Upvotes: 0

Related Questions