Serverside dynamically addClass Datatables

Question

NOTE - Datatable serverside processing with MySql database

and the code is as follows


$(document).ready(function(){
 var table = $('#userDataList').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "fetchData.php",
        stateSave: 'true'
    });
});

Also the table / page available at

http://testlearn.infinityfreeapp.com/index-old.html

How to add a class to all

a) even rows dynamically.

b) odd columns dynamically.

(with or without a button click)

Please see How to Ask, then revise your title to ask a clear, specific question in plain English. Also note that you're expected to make an attempt and show your effort. — isherwood
– isherwood, Commented Sep 5, 2024 at 14:11

Yuvaraj M · Accepted Answer · 2024-09-05 07:31:02Z

0

You can do this using rowCallback() on datatable initialisation.

$(document).ready(function () {
  var table = $("#userDataList").DataTable({
    processing: true,
    serverSide: true,
    ajax: "fetchData.php",
    stateSave: "true",
    rowCallback: function (row, data, index) {
      if (index % 2 == 0) {
        $(row).addClass("oddRow");
      } else {
        $(row).addClass("evenRow");
      }
    },
  });
});

Use this CSS to see the difference

table.dataTable tbody tr.evenRow{
    background-color: green;
}
table.dataTable tbody tr.oddRow{
    background-color: red;
}

Demo

answered Sep 5, 2024 at 7:31

Yuvaraj M

4,8873 gold badges10 silver badges20 bronze badges

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

6 Comments

varghese Over a year ago

Yuvaraj M - I don't know how to add separate class to each header cell. Did you know that ? If 'YES' can you share with me ?

Yuvaraj M Over a year ago

so you want unique class names for each headers right ?

Yuvaraj M Over a year ago

datatables.net/reference/option/columns.className check out this

varghese Over a year ago

possible to do it with css ?

varghese Over a year ago

unable to create any more questions that was informed by stackoverflow. No problem leave it. cheers

|

Collectives™ on Stack Overflow

Serverside dynamically addClass Datatables

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related