Doing some css with jquery Datatables on JS array

Question

I would like to do some css with my jquery Datatable however the only things I found was with html tables. Is it possible to change the look of a datatable when it takes its data from a js array ?

$('#example').DataTable({
    destroy: true,
    "scrollY": "200px",
    "scrollCollapse": true,
    "paging": false,       
    data: datatable,
    columns: [
        { title: "title1" },
        { title: "title2" }
    ]
});

Is there some parameters I could add here ?

@mmushtaq Something like changing the color of the cells,the text,or the border (like we can do when we use an html table). — Alexandre
– Alexandre, Commented May 22, 2017 at 7:56

davidkonrad · Accepted Answer · 2017-05-22 09:12:38Z

1

Yes. Look at createdRow and createdCell. Here is an example to demonstrate how to use those callbacks :

var table = $('#example').DataTable({
  createdRow: function(row, data, dataIndex ) {
    $(row).css('color', 'red')
  },
  columnDefs: [{
    targets: 3,
    createdCell: function(td, cellData, rowData, row, col) {
      $(td).css('color', 'green')
    }
  }]
})

demo -> http://jsfiddle.net/qsh3zgcc/

Or, as @mmushtaq points out, do what you wanna do in CSS, as you are used to do it :

table.dataTable tbody tr {
  color: red;
}
table.dataTable tbody tr td:nth-child(4) {
  color: green;
}

produces the exact same as the above callbacks.

demo -> http://jsfiddle.net/prkf1y90/

edited May 22, 2017 at 9:12

answered May 22, 2017 at 9:06

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Doing some css with jquery Datatables on JS array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related