Display-Taste unter der Bedingung in Datentabellen mit Zell-Wert

Ich habe eine Tabelle mit Datatables und die Letzte Spalte zeigt als Standardwert eine 0, aber es kann auch ein Wert >=1 bedeutet, solange wird es mit dem Wert 0, es sollte nicht alles tun, aber einmal ist es >=1 als ich will eine Schaltfläche angezeigt, die Sie wählt einen Wert aus der Datentabelle und dann öffnet sich ein Modal.

Nicht wissen, wie man diese Schaltfläche Sache getan.

Unten ist mein Datatable-code inkl. html.

JS:

//Manual Modal
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
});

//Datatables Code
$(document).ready(function() {
  $('#DTResTableList_1').DataTable({
    "ajax": {
      url: 'data.inc.php',
      method: 'POST',
      dataType: 'json',
      contentType: 'application/json; charset=utf-8',
      dataSrc: ""
    },
    paging: false,
    scrollY: 400,
    select: true,
    'columns': [{
        'data': 'TABLE_NUMBER'
      },
      {
        'data': 'STATION'
      },
      {
        'data': 'GUESTS'
      },
      {
        'data': 'T_STATUS'
      },
      {
        'data': 'MINUTES_SEATED'
      },
      {
        'data': 'MINUTES_OVERDUE'
      }
    ]
  });
  setInterval(function() {
    $('#DTResTableList_1').DataTable().ajax.reload(null, false); //user paging is not reset on reload
  }, 5000);
});

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <table class="table table-sm table-striped table-hover" id="DTResTableList_1" style="width: 100%;">
    <thead>
      <tr>
        <th class="" data-toggle="tooltip" data-placement="top" title="Table Number">Table</th>
        <th class="" data-toggle="tooltip" data-placement="top" title="Waiterstation">Station</th>
        <th class="" data-toggle="tooltip" data-placement="top" title="Guests on Table">G</th>
        <th class="" data-toggle="tooltip" data-placement="top" title="Table Stauts">Status</th>
        <th class="" data-toggle="tooltip" data-placement="top" title="Minutes Seated">Minutes</th>
        <th class="" data-toggle="tooltip" data-placement="top" title="Overdue">Button</th>
      </tr>
    </thead>
  </table>
</div>

InformationsquelleAutor Cyber | 2017-04-16

Ok, hier ist man näher zu, was Sie gefragt haben. Hier stellt Schaltflächen in der letzten Spalte ist der Mitarbeiter unter 40. Wieder ruft der code die Daten für die Zeile zeigt dann den Namen des Mitarbeiters. Beachten Sie, wie ich das Rendern im columnDefs.

http://jsbin.com/gobonec/edit?js,Ausgabe

$(document).ready(function () {



var table = $('#example').DataTable({
        "data": dataStore.data,
        "columns": [
        { "data": "name" },
        { "data": "age" },
        { "data": "position" },
        { "data": "office" },
        { "data": "extn" },
        { "data": "start_date" },
        { "data": "salary" },
        { "data": null },
        ],
        columnDefs: [{
        //puts a button in the last column
        targets: [-1], render: function (a, b, data, d) {
            if (data.age < 40) {
                return "<button type='button'>Go</button>";
            }
            return "";
        }
    }],

});
table.on("click", "button",
                function () {
                    alert(table.rows($(this).closest("tr")).data()[0].name);

                });

});

Diese im Grunde fest, was ich suchte. Ich hatte zu ändern, die Taste text, um fit die erste Frage. Dank so viel.
Was bedeutet a,b und d in der render-Funktion parameter angeben?
es hängt vom Kontext ab, aber ususaly eine Zelle Daten, b, ist geben Sie Daten anfordern und die Daten für die gesamte Zeile. D-Metadaten. Hier ist ein Referenz-link datatables.net/reference/option/columns.render
Gewusst wie: deaktivieren ein - /ausblenden gesamte Spalte, basierend auf dem Zustand ?

InformationsquelleAutor Bindrid

0

Vom DataTables Rückrufe:

fnCreatedRow:

Diese Funktion wird aufgerufen, wenn ein TR-element erzeugt wird (und alle TD child-Elemente eingefügt wurden), oder registriert, wenn die Verwendung eines DOM-Quelle, so dass die manipulation der TR-element (hinzufügen von Klassen etc).

Das bedeutet, dass Sie hinzufügen können, eine solche option beim erstellen DataTable:
```
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
    if (+aData.MINUTES_OVERDUE > 0) {
        $(nRow).find('td:last')
                .replaceWith('<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" val="'
                + aData.MINUTES_OVERDUE  + '">Launch demo modal</button>');
    }
},
```
Und veränderte modal angezeigt.bs.modal-handler zu:
```
$('#myModal').on('shown.bs.modal', function (e) {
    $('#myInput').val($(e.relatedTarget).attr('val')).focus();
});
```
Erklärung:
wenn eine Zeile erstellt wird:
- testen Sie den Inhalt des letzten Elementes
- wenn diese größer als 0 ist, ersetzen Sie die Zelle mit einem button mit einem Attribut mit dem Wert des Interesses
wenn der modal angezeigt wird:
- bekommen das Attribut in der zugehörigen Schaltfläche und legen Sie es in das Eingabefeld
Den event-handler für angezeigt.bs.modal muss innerhalb des Dokuments bereit.

InformationsquelleAutor gaetanoM

Habe ich eine Lösung verwendet, die in Zeile selector-Taste und Erweiterungen. In meinem Beispiel, wenn der Nutzer älter als 40 ist, ist die Schaltfläche beide deaktiviert und ausgeblendet. wenn Sie jünger sind, seine angezeigt und aktiviert. Klicken Sie auf die Schaltfläche, wird das Daten-Objekt und verwendet es, um anzuzeigen, den Namen der person

http://live.datatables.net/kudotiqu/1/edit

  $(document).ready( function () {
      var table = $('#example').DataTable({select:"single",dom:"tB",
                                   buttons:[{text:"Do It", 
                                             extend:"selected",
                                             action:function( e, dt, node, config){
                                             alert(  dt.rows({selected:true}).data()[0][0]);}}]
       });
     table.on( 'select', function ( e, dt, type, indexes ) {
            var s = dt.settings();                                          
           var g = dt.rows(indexes).data()[0] ;  
           if(parseInt(g[3]) > 40)  {
             s.buttons().enable(false);
             $(s.buttons()[0].node).css("display","none");
           } 
           else {
               s.buttons().enable(true);
             $(s.buttons()[0].node).css("display", "");
            } 
         } );

    });

Das sieht gut aus, aber es ist nicht in der Zeile / raster. Es sollte, ersetzen Sie den Wert mit-Taste und-Anzeige diesen Wert als button-text.

InformationsquelleAutor Bindrid

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.