Serverside dynamically addClass Datatable

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

1)

How to add a class to all

a) even rows dynamically.

b) odd columns dynamically.

2)

How to add a class with a button click to each odd rows with serverside processing with datatable ?

For example

$('tr:nth-child(odd)').addClass('whatever');

the above code is useful to add the code for the current page only.

But when we make a change like pagination / search / next page / order then the added class will disappears.

Also try something like

dt.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
      var row = dt.row(this).node();
      if ( rowIdx % 2 === 0 ) {
          $( 'td:eq(3)', row ).addClass("yellow");
      }                
});

the above code also applies / works on the current page only.

Assuming there's no additional logic (eg when value<0 then add class red), you can do the same with css: eg table > tbody > tr:nth-child(odd) > td:nth-child(4) jsfiddle.net/vkcodtry (using Vincent's fiddle). — fdomn-m
– fdomn-m, Commented Aug 31, 2024 at 10:32
i use a button click to do that function. available at testlearn.infinityfreeapp.com — varghese
– varghese, Commented Aug 31, 2024 at 12:25
Self duplicate of: Serverside dynamically addClass Datatables — gre_gor
– gre_gor, Commented Jun 23 at 9:15

Vincent Decaux · Accepted Answer · 2024-08-31 09:16:31Z

0

You should add your JS code on events, you can use the draw.dt event which is triggered every time the data is rendered, more information: https://datatables.net/reference/event/draw

var dt = new DataTable('#myTable');
 
dt.on('draw', function () {
   dt.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
      var row = dt.row(this).node();
      if ( rowIdx % 2 === 0 ) {
         $( 'td:eq(3)', row ).addClass("yellow");
      }                
   });
});

Not so sure about the syntax. Here is a Fiddle: https://jsfiddle.net/s7at8dgz/2/

edited Aug 31, 2024 at 9:16

answered Aug 31, 2024 at 8:53

Vincent Decaux

10.9k7 gold badges67 silver badges102 bronze badges

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

9 Comments

varghese Over a year ago

but it works on the current page only.

Vincent Decaux Over a year ago

@varghese check at the fiddle I added in my answer, the event is triggered on pagination also

varghese Over a year ago

Vincent - how to integrate it with at testlearn.infinityfreeapp.com

varghese Over a year ago

vincent - or how to integrate it with at testlearn.infinityfreeapp.com/index-old.html i am a beginner in serverside and datatables. so knowledge is very low average.

varghese Over a year ago

Vincent - or how your code can integrate with my basic code as $(document).ready(function(){ var table = $('#userDataList').DataTable({ "processing": true, "serverSide": true, "ajax": "fetchData.php", stateSave: 'true', });

|

Collectives™ on Stack Overflow

Serverside dynamically addClass Datatable

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related