right sytnax for addClass to the row depending on data

mdesign

i'm using datatables Editor and love it. often i struggle with the syntax (my javascript is not that good). maybe someone can help me out. i'm sure datatable can handle this. thx a lot.

i want to add a class to the row (tr) depending on data. so i tried this, but doesn't work:

var thisDataTable = $('table.editorTable').DataTable({
  ajax: 'editor-date-ssp.php',
  
  columns: [
  
  // Kategorie
  { data: null,
    render: function (data, type, row) {
  
      if (data.date_status == 'offline') { $(row).addClass('-offline'); }
    
      return data.date_kategorie;
    },
  editField: 'thri_date.date_kategorie',
  },
  
}); // thisDataTable

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Hi @mdesign ,

You can use createdRow for that, there's an example showing exactly that.

Cheers,

Colin

mdesign

thx colin,
thats exactly what i tried before. but this doesn't set any class.

{ data: null, 
  render: function (data, type, row) {
            $(row).addClass('important');
          }
},

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Yep, but you're doing it in columns.render, I'm saying move that code in to createdRow - that's where you add classes to the cell.

mdesign

thx again colin, but that doesn't work either. i will try to post the hole code here. i would need this in other codes too, so it would be great for me to have one working example and understanding the concept.

mdesign

$(document).ready(function($) {
  /* -------------------------------------------------------------------------- *
    .dataTable                                                   [ thisEditor ]
     defaults => app-datatables-editor-defaults.js
   * -------------------------------------------------------------------------- */
  editor = new $.fn.dataTable.Editor({
    ajax:  '-admin/editor-date-ssp.php',
    table: 'table.editorTable',    
    fields: [ 
            // Site
          { name:  'thri_date.webx_idn', label: 'Site',
                type:  'select',
                options: [
                    { label: 'thri11ertour.com', value: 'thri11ertour.com' },
                ]
        },

            // Titel
          { name:  'thri_date.date_tit', label: 'Titel' },

            // Status
          { name:  'thri_date.date_sta', label: 'Status',
          type:  'select',
          options: [
            { label: '-',       value: 'online' },
            { label: 'offline', value: 'offline' }
          ]
        },
            
            // Datum von
            { name:  'thri_date.date_dup', 
          label: 'Datum von',
          type:  'datetime',
          format:'DD/MM/YYYY - HH:mm', /* $date_001 */
          opts:  { showWeekNumber: true,
                   momentLocale: 'de' 
                 }
            },
            
            // Datum bis
            { name:  'thri_date.date_dto', 
          label: 'Datum bis',
          type:  'datetime',
          format:'DD/MM/YYYY - HH:mm', /* $date_001 */
          opts:  { showWeekNumber: true,
                   momentLocale: 'de' 
                 }
            },
            
            // Datum Nennschluss
            { name:  'thri_date.date_dns', 
          label: 'Nennschluss',
          type:  'datetime',
          format:'DD/MM/YYYY - HH:mm', /* $date_001 */
          opts:  { showWeekNumber: true,
                   momentLocale: 'de' 
                 }
            },
            
            // Kategorie
          { name:  'thri_date.date_kat', label: 'Kategorie',
          type:  'select',
          options: [
            { label: '-',       value: ''        },
            { label: 'Turnier', value: 'Turnier' },
            { label: 'Event',   value: 'Event'   },
          ]
        },

            // Online Nennung (erlaubt)
          { name:  'thri_date.date_anm', label: 'Anmeldungen',
          type:  'select',
          options: [
            { label: '-',        value: '' },
            { label: 'gesperrt', value: 'gesperrt' }
          ]
        },

            // Nennung anzeigen
          { name:  'thri_date.date_lst', label: 'Nennliste Anzeige',
          type:  'select',
          options: [
            { label: '-',        value: '' },
            { label: 'gesperrt', value: 'gesperrt' }
          ]
        },

            // Raster-Url
            { name:  'thri_date.date_vid', label: 'Raster-Url' },

            // Text
          { name:  'thri_date.date_txt', label: 'Text', type: 'textarea' },
      ],

    }); /* fn.dataTable.Editor */
    
      
      
      
      
  /* -------------------------------------------------------------------------- *
    .dataTable                                                   [ thisTables ]
     defaults => app-datatables-tables-defaults.js
   * -------------------------------------------------------------------------- */
    var thisDataTable = $('table.editorTable').DataTable({
      ajax:       '-admin/editor-date-ssp.php',
      order:       [[1, 'desc' ]], /* default (idn) wenn nicht stateSave */
      pageLength:  50,
      stateSave:   true,
      colReorder:  true,
      fixedHeader: true,
  
        columns: [
        // fixe Spalten (1) index / (2) idn / (3) trash / (4) edit
        { data: null, className: '-indx', defaultContent: '' /* indexRow content by CSS */ },
        { data: null, className: '-idnx', render: function (data, type, row) { return '<a href="date/' + data.thri_date.date_tit + ',' + data.thri_date.date_idn + '">' + data.thri_date.date_idn + '</a>'; } },
        { data: null, className: '-icon', defaultContent: '<a class="editor_remove"><i class="fa fa-trash-o"></i></a>' },
        { data: null, className: '-icon', defaultContent: '<a class="editor_edit"><i class="fa fa-pencil"></i></a>'  },  
      
        // Termin
        { data:      null,
          className: '-head', 
          render: function (data, type, row) { 
                    if(data.thri_date.date_txt) var txt = '<br><br>' + data.thri_date.date_txt; else var txt = '';

                    return '<b>' + data.thri_date.date_tit + '</b><br>' + data.thri_date.webx_idn + ' (' + data.thri_date.date_idn + ')' + txt; },
          editField: 'thri_date.date_tit',
        },

        // Kategorie
        { data:      null,
          className: '-nowrap', 
          render: function (data, type, row) {
                    var maintxt = '<b>' + data.thri_date.date_kat + '</b>';
                    var substxt  = '';
                    if (data.thri_date.date_sta == 'offline') { maintxt += '<br>Status: ' + data.thri_date.date_sta; }
                  //if (data.thri_date.date_anm) substxt += '<br>Anmeldung: ' + data.thri_date.date_anm;
                  //if (data.thri_date.date_lst) substxt += '<br>Nennliste: ' + data.thri_date.date_lst;
                    return maintxt + substxt;
                  },
          editField: 'thri_date.date_kat',
        },

        // Status (+ Icon wenn txt vorhanden)
        { data: 'thri_date.date_sta', className: '-text-center' },

        { data: 'thri_date.date_anm', className: '-text-center' },
        { data: 'thri_date.date_lst', className: '-text-center' },
        { data: 'thri_date.date_dup', className: '-text-right -datewidth2' },
        { data: 'thri_date.date_dto', className: '-text-right -datewidth2' },
        { data: 'thri_date.date_dns', className: '-text-right -datewidth2' },

        // Raster Url
        { data: null, className: '', 
          render: function (data, type, row) { 
                  return '<a target="_blank" href="' + data.thri_date.date_vid + '">' + data.thri_date.date_vid + '</a>'; },
        },

        // fixe Spalten am Ende _upd / webx_idn
        { data: 'thri_date.date_upd', className: '-text-right -nowrap -datewidth2' },
        { data: 'thri_date.webx_idn', className: '-text-right' },
        ],


        /* ------------------------------------------------------ *
         * Buttons                (hier thisDataTable definieren)
         * ------------------------------------------------------ */
        buttons: [

  // Button Toggle Section Breite
  { text:      '<i class="fa fa-arrows-h"></i>', 
    titleAttr: 'Tabelle maximieren',
    action:     function () { $('section.-secPepples').toggleClass('-secFullWidth'); } 
  },

  // Button Hilfe - öffnet Modal
  { text:      '<i class="fa fa-info-circle"></i>', 
    titleAttr: 'Hilfe',
    action:     function () { $('#reveal-dttipps').foundation('open'); } 
  },

  // Button Table - state.clear()
  { text:      '<i class="fa fa-recycle"></i>', 
    titleAttr: 'Tabelle Reset',
    action:     function () { thisDataTable.state.clear(); window.location.reload(); alert('Recycle Tabelle. Alle Tabellen Filter zurücksetzen.'); } 
  },

  // Button Table - 'ColVis' - datatables.net/reference/button/colvis
  { extend:    'colvis',
    text:      '<i class="fa fa-columns"></i>',
    titleAttr: 'Spalten ein/ausblenden',
    className: '-subs-text-left', /* eigene Class */
    columns:   ':not(.noColVis)', /* siehe th class */
    background: false,
    autoClose:  false,
  },

  // Button Table - 'Print'
  { extend:    'print',  
    text:      '<i class="fa fa-print"></i>', 
    titleAttr: 'Drucken', 
    autoPrint:  true 
  },

  // Button Table - 'Export' Collection - datatables.net/extensions/buttons/built-in
    { extend:    'collection',
    text:      '<i class="fa fa-download"></i>',
    titleAttr: 'Download',
    background: false,
    autoClose:  true,
    buttons: [
      { extend: 'copyHtml5',  className: '', text: 'Auswahl <b>kopieren <i class="-float-right fa fa-files-o"></i></b>' },
      { extend: 'csvHtml5',   className: '', text: 'Auswahl <b>Export   <i class="-float-right fa fa-file-text-o"></i>  CSV</b>' },
      { extend: 'excelHtml5', className: '', text: 'Auswahl <b>Export   <i class="-float-right fa fa-file-excel-o"></i> Excel</b>' },
      { extend: 'pdfHtml5',   className: '', text: 'Auswahl <b>Export   <i class="-float-right fa fa-file-pdf-o"></i>   PDF</b>' },        
    ],
  },

    // Button Editor - 'Edit' / 'Delete' / 'Neu' (float: right)
  { extend: 'remove', text: '<i class="fa fa-trash"></i><abbr>Löschen</abbr>',              titleAttr: 'Löschen',        className: '-float-right',            editor: editor },
  { extend: 'edit',   text: '<i class="fa fa-pencil"></i><abbr>Bearbeiten</abbr>',          titleAttr: 'Bearbeiten',     className: '-float-right',            editor: editor },
  { extend: 'create', text: '<i class="fa fa-plus-square"></i><abbr>Neu hinzufügen</abbr>', titleAttr: 'Neu hinzufügen', className: '-float-right -text-bold', editor: editor },

], /* buttons */ 




    }); // thisDataTable
     
}); // $(document).ready

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Hi @mdesign ,

I'm not seeing createdRow in that code, nor add addClass! This example here is showing what you're after, as I explained.

Cheers,

Colin

mdesign

thx colin. i got it now. the js-bin example helped a lot.