right sytnax for addClass to the row depending on data

right sytnax for addClass to the row depending on data

mdesignmdesign Posts: 27Questions: 7Answers: 0
edited June 26 in Editor

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 6,890Questions: 0Answers: 1,177

    Hi @mdesign ,

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

    Cheers,

    Colin

  • mdesignmdesign Posts: 27Questions: 7Answers: 0
    edited June 28

    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.

  • colincolin Posts: 6,890Questions: 0Answers: 1,177
    edited June 28

    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.

  • mdesignmdesign Posts: 27Questions: 7Answers: 0

    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.

  • mdesignmdesign Posts: 27Questions: 7Answers: 0
    edited June 28
    $(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.

  • colincolin Posts: 6,890Questions: 0Answers: 1,177
    Answer ✓

    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

  • mdesignmdesign Posts: 27Questions: 7Answers: 0

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

Sign In or Register to comment.