DataTables - detial row feltölése dinamikusan

DataTables - detial row feltölése dinamikusan
2014-07-22T21:54:23+02:00
2014-07-30T17:01:22+02:00
2022-10-15T23:21:39+02:00
drk
Sziasztok! 

Ismét van egy kis problémám, mivel nehéz lenne elmagyarázni ezért felvettem: datatables hiba
Így néz ki a kód: 

Detail tartalma:

function fnFormatDetails ( oTable ) { var sOut = '<div id="details"></div>'; return sOut; }
Sor adatainak küldése a details.php-ba

$(document).ready(function() { oTable = $('#example').dataTable(); oTable.$('tr').click( function () { var sData3 = oTable.fnGetData( this ); $.ajax({ type: "POST", url: "/includes/details.php", //beállítod a php fájlod data: { sData3 : sData3 }, //itt küldöd el az adatokat success: function(data){ $('#details').html(data); } }); } ); } );
details.php részlete:
if (is_array($_POST['sData3'])) { foreach ($_POST['sData3'] as $value => $ertek) { if ($value == 3) { record_set('contactlist',"SELECT * FROM contacts WHERE contact_email = '$ertek'"); echo $row_contactlist['contact_first']; ?>&nbsp<?php echo $row_contactlist['contact_last']; ?> </br> <?php echo $row_contactlist['contact_company']; ?> </br> <?php echo $row_contactlist['contact_cell']; ?> </br> <?php } } } ?>
Esetleg ha valakinek van valami ötlete más megoldásra akkor az is jó lenne, viszont itt nem csak a sor adatait kellene visszakapnom, hanem azokból az adatokból kéne más adatokhoz jussak. Ezt most csak tesztelés céljából van még így
Mutasd a teljes hozzászólást!
megcsináltam így:

function fnFormatDetails ( oTable, nTr ) { var aData = oTable.fnGetData( nTr ); var str = aData[3]; var res = str.replace(/@/g, "-at-"); var res2 = res.toString().replace(/\./g, '-dot-'); //var res2 = res.replace(/./g, "-dot-"); //var sOut = '<div id="details_'+res+'"></div>'; var sOut = '<div id="'+res2+'"></div>'; return sOut; }
így működik :)
Mutasd a teljes hozzászólást!

  • Ha van a tr-ednek (egyedi!) id-ja akkor azt fűzd össze a div id-val, hisz az id-nak egyedinek kell lennie egy html oldalon. Nem lehet egyszerre több details id-jú div-ed, hisz fogalma sem lesz js-nek, hogy te melyikre gondolsz a sok közül, mikor fel akarod tölteni adattal (így az elsőt módosítja amit megtalál)
    Mutasd a teljes hozzászólást!
  • Oké ezt értem köszönöm, de sajnos nincsenek egyedi tr-ek mivel a tábla is dinamikusan töltődik fel.
    Mutasd a teljes hozzászólást!
  • Esetleg így?

    function fnFormatDetails ( oTable ) { var sOut = '<div class="details"></div>'; // ---> id helyett class return sOut; }
    és
    $(document).ready(function() { oTable = $('#example').dataTable(); oTable.$('tr').click( function () { var row = this; // ---> this lementése a row változóba hogy a success-ben is el lehessen érni a sort var sData3 = oTable.fnGetData( this ); $.ajax({ type: "POST", url: "/includes/details.php", //beállítod a php fájlod data: { sData3 : sData3 }, //itt küldöd el az adatokat success: function(data){ $('.details', row).html(data); // ---> majd a row-on belül keresi meg detailst és oda rakja be a tartalmat. } }); } ); } );
    Mutasd a teljes hozzászólást!
  • Ha div helyett class van akkor ez a hiba üzenet jön Firebug-ban:

    TypeError: Argument 2 of Document.evaluate does not implement interface Node.
    null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

    itt a forrás kód:

    if (Prototype.BrowserFeatures.XPath) { document._getElementsByXPath = function(expression, parentElement) { var results = []; var query = document.evaluate(expression, $(parentElement) || document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0, length = query.snapshotLength; i < length; i++) results.push(query.snapshotItem(i)); return results; } }
    Válaszban megkapja a helyes adatokat viszont nem ír ki semmit.
    Mutasd a teljes hozzászólást!
  • És ha raksz rá valami kamuid-t?

    var sOut = '<div id="details" class="details"></div>';

    (id-nek egyedinek kellene majd lennie, de ez legyen a következő probléma)

    be tudod másolni azt a kódot ahol a fnFormatDetails-t adod meg?
    Mutasd a teljes hozzászólást!
  • "kamu id-vel sem megy"

    probálkoztam így:

    function fnFormatDetails ( oTable, nTr ) { var aData = oTable.fnGetData( nTr ); var sOut = '<div id="details" class="details"></div>'; return sOut; }
     meg úgy ahogy eredetileg is irtam: 

    function fnFormatDetails ( oTable ) { var sOut = '<div id="details" class="details"></div>'; return sOut;
    }

    Hivatalosan ugye az elsővel működne ha nem dinamikusan kapná az adatot

    Ez az eredeti statikus adatokkal:

    /* function fnFormatDetails ( oTable, nTr ) { var aData = oTable.fnGetData( nTr ); var sOut = '<table cellpadding="0" cellspacing="0" border="0" style="width:100%;">'; sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>'; sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>'; sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>'; sOut += '</table>'; return sOut; }*/
     
    Open Close a táblához:

    /* Add event listener for opening and closing details * Note that the indicator for showing which row is open is not controlled by DataTables, * rather it is done here */ $(document).ready(function() { $('#example tbody td img').live('click', function () { var nTr = $(this).parents('tr')[0]; if ( oTable.fnIsOpen(nTr) ) { /* This row is already open - close it */ this.src = "includes/images/details_open.png"; oTable.fnClose( nTr ); } else { /* Open this row */ this.src = "includes/images/details_close.png"; oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' ); } } );
    } );
    Mutasd a teljes hozzászólást!
  • Fel tudsz valahova rakni egy kis példát ami nem működik? Ötletem nincs, hogy miért dobja a TypeError-t

    A $('.details', row).html(data); tényleg rossz, mivel a details nem a row-n belül van, hanem a row után lévő infó rowban:

    $(row).next('tr.details').find('div.details').html(data);

    de ennek nem kellene semmilyen hibát dobnia, max semmit nem csinál.
    Mutasd a teljes hozzászólást!
  • Ja de a hibát nem a böngésző ablakban dobta, hanem a fire bug irta ki! h a prototype.js-be ez a hiba. Szóval igen a class-al nem csinált semmit. konkrétan a class ott volt ha megnéztem a web developer-el de bele nem töltött semmit, pedig az ajax visszatért a jó információkkal!
    Mutasd a teljes hozzászólást!
  • prototype.js-be ez a hiba

    amit néztem plugin az jQuery-re épül... meg a kód is elég "jQuery-s" - hogy kerül ide a prototype.js?
    Mutasd a teljes hozzászólást!
  • az a simple customer "CRM"-hez tartozik nem tudok, hogy mit kavar ide be.

    Viszont azt nem lehetne valahogy megoldani, hogy ha lenyitom a row-t akkor ott a letudok kérni az adott sor x celláját. Azon belül nem tudom esetleg kiküldeni az ajaxal ezt az adatot és ott mókolni vele majd a visszatérési érték jelenne meg ott?

    Mert ugye az alapból így nézne ki:

    /* function fnFormatDetails ( oTable, nTr ) { var aData = oTable.fnGetData( nTr ); var sOut = '<table cellpadding="0" cellspacing="0" border="0" style="width:100%;">'; sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>'; sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>'; sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>'; sOut += '</table>'; return sOut; }*/
     
    és akkor valahogy itt az '+aData[x]+'-et elküldeni a details.php-ba ahol tudok ezzel egy sql lekérdezést csinálni majd az alapján kiíratni a tömb sorait és azzal térjen vissza és jelenítse meg? Vagy ez hülyeség?
    Mutasd a teljes hozzászólást!
  • Egy kicsit ugyan megkésve, de:
    Attól, hogy dinamikusan töltődik fel még generálhatsz neki egyedi azonosítót, például a rekord azonosítójából. Ha jól értem contact_email mező a barátod, legfeljebb a kukacot kell valamire cserélned, tehát egy-egy div így nézhetne ki:
    <div id="details_valaki-at-valami.hu"></div>

    A tr-nek hasonlóan adhatsz id-t. Abból pedig kibogarászhatod, hogy melyik div-et kell feltöltened. Persze használhatod a html5-ös "data-..." tag-et is (pl. data-email="valaki-at-valami.hu").
    Mutasd a teljes hozzászólást!
  • Így néz ki most:

    function fnFormatDetails ( oTable, nTr ) { var aData = oTable.fnGetData( nTr ); var str = aData[3]; var res = str.replace(/@/g, "-at-"); var sOut = '<div id="details_'+res+'"></div>'; return sOut; } $(document).ready(function() { oTable = $('#example').dataTable(); oTable.$('tr').click( function () { var row = this; var sData3 = oTable.fnGetData( this ); var str = sData3[3]; var res = str.replace(/@/g, "-at-"); $.ajax({ type: "POST", url: "/includes/details.php", //beállítod a php fájlod data: { sData3 : sData3 }, //itt küldöd el az adatokat success: function(data){ $('#details_'+res+'').html(data); } }); } ); } );
    details.php
    if (is_array($_POST['sData3'])) { foreach ($_POST['sData3'] as $value => $ertek) { if ($value == 3) { record_set('contactlist',"SELECT * FROM contacts WHERE contact_email = '$ertek'"); echo $row_contactlist['contact_first']; ?>&nbsp<?php echo $row_contactlist['contact_last']; ?> </br> <?php echo $row_contactlist['contact_company']; ?> </br> <?php echo $row_contactlist['contact_cell']; ?> </br> <?php } } }
    Firebug szerint visszajön a válasz a details.php-ról ami kell viszont a div-be sajnos nem teszi bele ezt :/
    Mutasd a teljes hozzászólást!
  • ha a html() előtt kialertezed az id-t, akkor mit ír ki?

    success: function(data){ alert('#details_'+res); $('#details_'+res).html(data); }
    Mutasd a teljes hozzászólást!
  • Jót ír ki 

    #details_valami-at-valami.valami
    Mutasd a teljes hozzászólást!
  • megcsináltam így:

    function fnFormatDetails ( oTable, nTr ) { var aData = oTable.fnGetData( nTr ); var str = aData[3]; var res = str.replace(/@/g, "-at-"); var res2 = res.toString().replace(/\./g, '-dot-'); //var res2 = res.replace(/./g, "-dot-"); //var sOut = '<div id="details_'+res+'"></div>'; var sOut = '<div id="'+res2+'"></div>'; return sOut; }
    így működik :)
    Mutasd a teljes hozzászólást!
  • #details_valami-at-valami.valami


    Óóó tényleg. Bocsi figyelmetlen voltam - így már logikus: css-ben a . az osztály selector így a $('#details_'+res) részben a jQuery egy ilyen elemet keresne:

    <div id="details_valami-at-valami" class="valami">
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd