Adding custom css class on datatable row

Adding custom css class on datatable row

Datatable is very popular as javascript library to process json based data either in based on HTML, DOM, ajax and server side. Me personally never used this library on my previous project, for several day I eager to learn to implement this library, who’s know I would need this library on my next project.

Today I wanna share you on how to add custom css class based on specific data condition. Let say u want to make row have distinct background if meets specific condition. First of all we would starting to make starting option to make it.

Here the code :

datatable init
 
  1. //this var is array to place our specific identifier on row to make custom css background
  2. var bookmarked_list = ‘[“9899”, “1244”, “44993”]’;
  3. var dataTable = $('#datatable').DataTable( {
  4.         "ajax": { 
  5.           'url' :  '<?php echo current_url();?>/home/update_datatable',
  6.           'data' : { "region": region }
  7.          },
  8.          processing : true,
  9.          language: {
  10.              processing: "<img src='https://s-media-cache-ak0.pinimg.com/originals/dd/67/4f/dd674f89d713bb2645a3292510219998.gif' height= 100px; width= 150px; /> <br> <span style='color: red'> Get the data.... </span>"
  11.           },
  12.        
  13.         "createdRow": function( row, data, dataIndex ) {
  14.           if(localStorage.bookmarked_list != false)
  15.           {
  16.              if ( searchStringInArray(data[0], JSON.parse(bookmarked_list) ) != -1 ) {
  17.               $(row).addClass( 'toogle_green' );
  18.               
  19.               }
  20.           }
  21.          
  22.         },
  23.          "aoColumnDefs": [            
  24.                {
  25.                  "aTargets": [ 1 ], // Column to target
  26.                  "mRender": function ( data, type, full ) {
  27.                    // 'full' is the row's data object, and 'data' is this column's data
  28.                    // e.g. 'full[0]' is the comic id, and 'data' is the comic title
  29.                    return '<a href="https://sirup.lkpp.go.id/sirup/rup/detailPaketPenyedia?idPaket=' + full[0] + '">' + data + '</a>';
  30.                  }
  31.                },
  32.                {
  33.                  "aTargets": [ 2 ], // Column to target
  34.                  "mRender": function ( data, type, full ) {
  35.                    // 'full' is the row's data object, and 'data' is this column's data
  36.                    // e.g. 'full[0]' is the comic id, and 'data' is the comic title
  37.                    var d = addCommas(full[2]);
  38.                    return '<span class="rupiah">' + d + '</span>';
  39.                  }
  40.                }, 
  41.                 {
  42.                  "aTargets": [ 7 ], // Column to target
  43.                  "mRender": function ( data, type, full ) {
  44.                    // 'full' is the row's data object, and 'data' is this column's data
  45.                    // e.g. 'full[0]' is the comic id, and 'data' is the comic title
  46.                   
  47.                    return '<button type="button" class="btn btn-default btn-sm bookmark_paket" id="bookmark_paket" aria-label="Left Align"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span></button>';
  48.                  }
  49.                }
  50.         ]
  51.     } );

*don’t forget to include library script on your complete html script

 
 
  1.   <link rel="stylesheet" type="text/css" href=”assets/js/datatables/datatables.min.css"/>
  2.  <script type="text/javascript" src=”assets/js/datatables/datatables.min.js"></script>

the problem with those script is it would only initialize custom css on first initial. i must admit bookmarked_list is cannot be updated on ajax success method. tips is you can change those variable from local variable to localStorage variable. let change it to :

 

 
 
  1.  "createdRow": function( row, data, dataIndex ) {
  2.           if(localStorage.bookmarked_list != false)
  3.           {
  4.              if ( searchStringInArray(data[0], JSON.parse(localStorage.bookmarked_list) ) != -1 ) {
  5.               $(row).addClass( 'toogle_green' );
  6.               
  7.               }
  8.           }
  9.          
  10.         },

as you can see i change the localStorage from local variable in javascript. magically when i update the localstorage in ajax success method then it would change to / updated too.. so when we rebuild datatable row either by ajax or dom it would made some css background based our list.

 

 

 

Shares 0
Comments are closed.
"