Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 18
Like Tree2Likes

Thema: Datatables JQuery Dialog mit Details zum Datensatz

  1. #1
    VBDev ist offline Jungspund
    registriert
    13-01-2017
    Beiträge
    10

    Datatables JQuery Dialog mit Details zum Datensatz

    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/re...yui-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-Code:
    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

  2. #2
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    Schon mal geschaut ob was in der Fehlerkonsole (Wo finde ich die Fehlerkonsole?) steht?
    Hoffe ich konnte helfen

  3. #3
    VBDev ist offline Jungspund
    registriert
    13-01-2017
    Beiträge
    10

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    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?

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.569

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    Zitat Zitat von VBDev Beitrag anzeigen
    Nicht wirklich
    steht was drin oder nicht? zeig im zweifel einfach ein screen hier.
    hinweis: jquery gibt keine fehlermeldungen aus. das debugge ich immer mit zwischenausgaben via console.log()
    http://forum.jswelt.de/javascript-fa...n-konsole.html (Arbeiten mit der Konsole)
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  5. #5
    VBDev ist offline Jungspund
    registriert
    13-01-2017
    Beiträge
    10

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    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

  6. #6
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.569

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    das sieht aus als wäre die nötige lib nicht geladen
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  7. #7
    VBDev ist offline Jungspund
    registriert
    13-01-2017
    Beiträge
    10

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    Hier das Beispiel wie ich das haben möchte:
    https://datatables.net/extensions/re...yui-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!

  8. #8
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.569

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    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
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  9. #9
    VBDev ist offline Jungspund
    registriert
    13-01-2017
    Beiträge
    10

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    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)

  10. #10
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.569

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    wo welchen link meinst du genau?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  11. #11
    VBDev ist offline Jungspund
    registriert
    13-01-2017
    Beiträge
    10

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    Zitat Zitat von mikdoe Beitrag anzeigen
    wo welchen link meinst du genau?
    Diesen Hier: https://datatables.net/extensions/re...yui-modal.html
    Dort gibt es die Funktion im grunde schon, nur dass ich den Grünen Button auf einen Link in einer separaten spalte anwenden möchte...

  12. #12
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.569

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    ich würde versuchen, den grünen button im firefox inspector anschauen und sehen, was da auf onclick liegt
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  13. #13
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    Wird der onclick nicht auf die Tabellenzelle gelegt?
    Hoffe ich konnte helfen

  14. #14
    VBDev ist offline Jungspund
    registriert
    13-01-2017
    Beiträge
    10

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    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.

  15. #15
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Datatables JQuery Dialog mit Details zum Datensatz

    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.
    mikdoe and VBDev like this.
    Hoffe ich konnte helfen

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Antworten: 9
    Letzter Beitrag: 08-08-2013, 14:05
  2. jquery ui dialog auf mehrere elemente legen?
    Von TAiS46 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 04-09-2010, 14:01
  3. Probleme mit JQuery Dialog/Slider
    Von ProduZa im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 02-07-2010, 11:20
  4. Antworten: 0
    Letzter Beitrag: 15-12-2009, 10:54
  5. JQUERy-Ajax-Response in einem Dialog
    Von nightmove im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 05-10-2008, 19:35

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •