Ankündigung

Einklappen
Keine Ankündigung bisher.

DataTables - Werte aus Tabelle in Input Felder schreiben/übergeben

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • DataTables - Werte aus Tabelle in Input Felder schreiben/übergeben

    Hallo,

    Ich habe eine dataTable in einem Bootstrap Modal, diese wird per Ajax geladen. In Spalte 3 habe ich einen Button definiert, ich möchte nun dass bei klick auf diesen Button die Werte aus z.B. Spalte 1 in ein Inputfeld mit der id #name übergeben wird.

    Einige Spalten sind nicht sichtbar, enthalten aber auch daten. Auch diese sollten wiederum in andere Inputfelder übergeben werden (beim klicken des Buttons). Meiner Meinung nach würde das wie folgt aussehen, leider funktioniert das nicht wirklich.

    Code:
        $(document).ready(function() {
            var table = $('#table1').DataTable({
                'processing': true,
                'serverSide': true,
                'pageLength': 10,
                'ajax': 'models/processing.php',
                'order': [
                    [2, 'asc']
                ],
                'language': {
                    'url': 'models/languages/datatables.de.lang',
                },
                'columnDefs': [{
                        'targets': 3,
                        'data': null,
                        'searchable': false,
                        'orderable': false,
                        'render': function(data, type, row, meta) {
                            return '<button type="button" class="btn btn-primary btn-edit"><i class="fa fa-pencil"></i></button>';
                        }
                    },
                    {
                        'data': 'state',
                        'targets': 2,
                        'render': function(data, type, row) {
                            if (row[2] == 0) {
                                return '<span class="text-success">AKTIV</span>';
                            } else if (row[2] == 8) {
                                return '<span class="text-danger"><i class="fa fa-trash-o text-danger"></i> INAKTIV</span>';
                            }
    
                        }
                    },
                    { 'targets': [4,5,6,7,8], 'visible': false, 'searchable':true }
                ],
            });
    
            $('#table1').on('click', '.btn-edit', function(){
    
               //Hier müsste ich den Wert aus der Tabellenreihe "ziehen" und an die Input ID's einfügen, in dem der Button ist. irgendwie so: $('#name').val(data[1]);
    
            });
        });
    MfG. phpCrow

  • #2
    irgendwie so: $('#name').val(data[1]);
    Verkehrter Ansatz. Du musst dir die Daten relativ zum Button holen. Dazu fallen mir spontan zwei Wege ein:

    - data-* Attribute: du speicherst die relevanten Daten als data-Attribut direkt am Button und kannst im Event-Handler per this.dataset.<name> darauf zugreifen.

    - DOM: Du kennst den Button (this), damit kennst du auch das tr-Element, in dem der Button ist, und damit auch alle Daten, die du (bzw. DataTables) ins HTML/DOM dieser Zeile geschrieben hast.

    Kommentar


    • #3
      Die Daten in data Attribute des buttons zu schreiben wäre kein Problem:

      HTML-Code:
        <button type="button" class="btn btn-primary btn-edit" data-name="'+ $name +'"><i class="fa fa-pencil"></i></button>
      Nach deinem Ansatz wäre das dann:

      Code:
       $('#table1').on('click', '.btn-edit', function(){              
            $('#inputname').val.this.dataset["data-name"];  
       });
      Muss ich morgen mal probieren, wird sicher einiges an "gebastel" aber schonmal danke für den Ansatz! Über DOM Wäre dann ja mit closest, scheint aber deutlich mehr Code zu sein.

      Kommentar


      • #4
        Über DOM Wäre dann ja mit closest, scheint aber deutlich mehr Code zu sein.
        Kommt immer drauf an, was man halt braucht.

        Wenn z.B. in der Zeile Formularelemente stehen, und man braucht ihre Werte, helfen dir data-Attribute nicht weiter.

        Code:
        $('#inputname').val.this.dataset["data-name"];
        1. .val()
        2. this.dataset.name sh. https://developer.mozilla.org/en-US/...lement/dataset

        Kommentar


        • #5
          Vielen Dank, funktioniert!

          Hier der Code:
          HTML-Code:
          $('#example').on('click', '.btn-edit', function(){    
                $('#inputname').val(this.dataset.name);  
          });
          Javascript ist mir noch ein Rätsel aber das wird sicher auch noch

          Kommentar

          Lädt...
          X