[JQUERY] Datatables JQuery Dialog mit Details zum Datensatz

V

VBDev

New member
Guten Tag,

Ich habe eine Frage zu JQuery in verbindung mit Datatables (datatables.net). Ich Lade die Daten der Tabelle mithilfe von AJAX und PHP. Das ganze funktioniert auch und mir werden die Daten in der Tabelle dargestellt.

In der 3. Spalte der Datatable (Index 2) wird ein Link dargestellt, welcher einen jQuery Dialog öffnen soll, in welchem ich dann zusätzliche Datensätz aus der AJAX anfrage anzeigen kann. Zum Beispiel ein zu langer Text der sich in der Tabelle nicht darstellen lässt.

So wie in diesem Beispiel: https://datatables.net/extensions/responsive/examples/display-types/jqueryui-modal.html
Nur statt dem Plus icon in der ersten Spalte den Link mit der class action_button zum öffnen.

Dazu habe ich folgenden Code erstellt, welcher leider nicht funktioniert. Es wird weder das ModalView/Dialog erstellt, noch geöffnet...

PHP: 
echo "<script type='text/javascript'> 
 $(document).ready( function () { 
 $('#infotable').DataTable( 
 { 
 'processing': true, 
 'serverSide': true, 
 'ajax': 'models/processing_info.php', 
 'order': [[1, 'asc']], 
 'language': { 
 'url': '". /* SPRACHVARIABEL PHP */ lang('GLOBAL_DATATABLELANGUAGE') ."' 
 }, 
 
 'columnDefs': [{ 
 'targets': 2, 
 'render': function ( data, type, row, meta ) { 
 var RCID = row[7]; 
 return '<a href=\"#\" id=\"opener' + RCID + '\" class=\"action_button\">View Details</a>'; 
 } 
 }], 
 
 responsive: { 
 details: { 
 display: $.fn.dataTable.Responsive.display.modal( { 
 header: function ( row ) { 
 var data = row.data(); 
 return 'Details for '+data[0]+' '+data[1]; 
 } 
 } ), 
 renderer: $.fn.dataTable.Responsive.renderer.tableAll() 
 } 
 } 
 
 
 } 
 ); 
 
 
 $('#infotable').on('click', '.action_button', function(){ 
 showModalDialog(this); 
 }); 
 
 } ); 
 
 </script>";

MfG. VBDev
 
Nicht wirklich,
Stimmt denn der Syntax so? Ich bin mit Javascript & AJAX nur geringt vertraut, habe das aber so der Dokumentation entnommen und erstmal testweise nicht stark modifiziert.

Oder gibt es eine möglichkeit das noch sauberer mit Datatables & JQuery Dialog zu lösen?
 
Hier mal die Fehlermeldung. Im Internet Explorer öffnet sich ein Browser-PopUp mit der Seite als Inhalt. Im Firexfox tut sich nichts. Ich möchte aber einen JQuery Dialog aufrufen und mit daten füllen...

2017-01-16 07_07_29-2.png

MfG. VBDev
 
Hier das Beispiel wie ich das haben möchte:
https://datatables.net/extensions/responsive/examples/display-types/jqueryui-modal.html
Gelanden sind:
jquery-1.12.4.js
jquery-ui.js
jquery.dataTables.min.js
dataTables.jqueryui.min.js
dataTables.responsive.min.js
responsive.jqueryui.min.js

Ich glaube eher dass es an der Art liegt wie ich mithilfe des Links mit der Klasse "action_button" den Dialog mit den entsprechenden Daten laden möchte...
Wie man das sauber löst weiß ich aber leider auch nicht, und habe nichts darüber gefunden...

Mit JQuery, JQueryUI und Datatables alleine müsste das doch schon gehen ohne eine weitere Lib zu laden oder zu nutzen.

Bis hierhin aber schonmal Vielen Dank!
 
dann stimmt was mit der reihenfolge nicht. die fehlermeldung ist eindeutig, da fehlt was oder der browser sucht nach einer falschen funktion z. b. wg. tippfehler
 
Okay Danke dann probiere ich das morgen mal.

Aber trotzdem meine Frage: Gibt es eine bessere möglichkeit einen Link darzustellen der dann das Modal öffnet? Mir scheint das nicht wirklich optimal... das öffnen des Buttons habe ich auf einer anderen Seite gefunden, auf der Datatables Seite wie 2 Beiträge weiter oben ist aber nicht zu erkennen, wie der Link erstellt wird (grüner button vorne)
 
ich würde versuchen, den grünen button im firefox inspector anschauen und sehen, was da auf onclick liegt
 
In der Zelle sehe ich auch kein onclick, dort wo der Button ist steht ein "::before".

Aber wie kommt das ganze zustande? Ich versuche ja das irgendwie nachzuvollziehen aber da ist einfach nichts.
 
Hab mal kurz geschaut bei DataTables. Also wie ich das vertehe, ist der interne Modal nur zum anzeigen aller Daten der geklickten Reihe. Das was du suchst müsste wohl eher in diese Richtung hier gehen.

Und dein
Code: 
$('#infotable').on('click', '.action_button', function(){ 
    showModalDialog(this); 
});
kann ja nicht gehen, wenn dein '.action_button' ja erst noch per AJAX geladen wird.
 
Hallo,
Vielen Dank das hatte ich auch als überlegung und habe dann versucht das innerhalb des Buttons als onclick="" zu setzten. Das hat leider auch nicht funktioniert.

Wie würdest du das denn Lösen? Das wären so die einzigen Ideen die mir bekannt sind.
 
Habe wie gesagt noch nie mit DataTables gearbeitet, aber so aus dem Bauch heraus:
Code: 
$('#example').dataTable({
    ...
    bisherige Config
    ...
    "rowCallback": function (row, data, index) {
        $('.action_button', row).on('click', function () { 
            showModalDialog(this); 
        });
    }
});
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben