fbpx

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 :

 
//this var is array to place our specific identifier on row to make custom css background
var bookmarked_list = ‘[“9899”, “1244”, “44993”]’;
var dataTable = $('#datatable').DataTable( {
        "ajax": { 
          'url' :  '<?php echo current_url();?>/home/update_datatable',
          'data' : { "region": region }
         },
         processing : true,
         language: {
             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>"
          },
       
        "createdRow": function( row, data, dataIndex ) {

          if(localStorage.bookmarked_list != false)
          {
             if ( searchStringInArray(data[0], JSON.parse(bookmarked_list) ) != -1 ) {
              $(row).addClass( 'toogle_green' );
              
              }
          }
         

        },
         "aoColumnDefs": [            
               {
                 "aTargets": [ 1 ], // Column to target
                 "mRender": function ( data, type, full ) {
                   // 'full' is the row's data object, and 'data' is this column's data
                   // e.g. 'full[0]' is the comic id, and 'data' is the comic title
                   return '<a href="https://sirup.lkpp.go.id/sirup/rup/detailPaketPenyedia?idPaket=' + full[0] + '">' + data + '</a>';
                 }
               },

               {
                 "aTargets": [ 2 ], // Column to target
                 "mRender": function ( data, type, full ) {
                   // 'full' is the row's data object, and 'data' is this column's data
                   // e.g. 'full[0]' is the comic id, and 'data' is the comic title

                   var d = addCommas(full[2]);
                   return '<span class="rupiah">' + d + '</span>';
                 }
               }, 

                {
                 "aTargets": [ 7 ], // Column to target
                 "mRender": function ( data, type, full ) {
                   // 'full' is the row's data object, and 'data' is this column's data
                   // e.g. 'full[0]' is the comic id, and 'data' is the comic title

                  
                   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>';
                 }
               }

        ]
    } );

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

 
  <link rel="stylesheet" type="text/css" href=”assets/js/datatables/datatables.min.css"/>
 <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 :

 

  "createdRow": function( row, data, dataIndex ) {

          if(localStorage.bookmarked_list != false)
          {
             if ( searchStringInArray(data[0], JSON.parse(localStorage.bookmarked_list) ) != -1 ) {
              $(row).addClass( 'toogle_green' );
              
              }
          }
         

        },

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.