Données activées avec la boîte de fantaisie

Question

J'ai essayé d'échouer et d'afficher les détails supplémentaires dans une table, j'ai donc essayé d'utiliser un fancybox à la place. Je voudrais quelque chose comme ceci:

Avez-ce déjà juste, besoin de quelqu'un pour remplir les déclencheurs pour obtenir la boîte affichant, toute aide serait grande.

 $(document).ready(function() { 

      $('a.moreinfo').each(function() { 
       var that = this; 
       $(this).fancybox({ 
        "href": "notes.php?notes="+that.href.split('#')[1], 
        "width": 700, 
        "height": 500, 
        "autoDimensions": false 
       }); 
      }); 
     }); 


$(document).ready(function() 
{ 
var oTable = $('#example').dataTable 
({ 
     'bProcessing': true, 
     'aaSorting': [[1,'asc']], 
     'iDisplayLength': 10, 
     'bJQueryUI': true, 
     'bServerSide': true, 
     'sAjaxSource': 'ajax/pc-ajax-table.php', 
     'fnServerData': function(sSource, aoData, fnCallback) 
    { 

     aoData.push({ "name": "from_date", "value": $("#from").val() }, 
        { "name": "to_date", "value": $("#to").val() }); 
    $.ajax 
     ({ 
      'dataType': 'json', 
      'type' : 'POST', 
      'url'  : sSource, 
      'data' : aoData, 
      'success' : fnCallback 
     }); 
    }, 
     'aoColumns':[ 
     {"bVisible": false, "bSortable": false, "bSearchable": true},  
     {"fnRender": format_ddmmyyyy}, 
     null, 
     null, 
     null, 
     {"bVisible": false, "bSortable": false, "bSearchable": true}, 
     {"bVisible": false, "bSortable": false, "bSearchable": true}, 
     {"bVisible": false, "bSortable": false, "bSearchable": true}, 
     null, 
     null, 
     null, 
     null, 
     null] 
}); 
// For clicking and selecting the date ranges 
$("button").button().click(function() { 
    oTable.fnDraw(); 
    }); 
var dates = $("#from, #to").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    changeYear: true, 
    dateFormat: 'dd/mm/yy', 
    onSelect: function(selectedDate) { 
    var option = this.id == "from" ? "minDate" : "maxDate", 
     instance = $(this).data("datepicker"), 
     date = $.datepicker.parseDate(
     instance.settings.dateFormat || 
     $.datepicker._defaults.dateFormat, 
     selectedDate, instance.settings); 
    dates.not(this).datepicker("option", option, date); 
    } 
}); 
}); 

// Take date from mysql, formatted yyyy-mm-dd, and return as dd/mm/yyyy 
function format_ddmmyyyy(oObj) { 
var sValue = oObj.aData[oObj.iDataColumn]; 
var aDate = sValue.split('-'); 
return aDate[2] + "/" + aDate[1] + "/" + aDate[0]; 
} 

// Highlight Rows 
$("tbody tr").live("mouseover", function(){ 
$(this).children().addClass("highlighted"); 
}); 
$("tbody tr").live("mouseout", function(){ 
$(this).children().removeClass("highlighted"); 
}); 
// highlight click 
/*$('#example tbody tr').live('click', function() { 
$(this).toggleClass('row_selected'); 
}); */ 

/* show hide loading gif */ 
function showLoading() { 
$("#loading").show(); 
} 

function hideLoading() { 
$("#loading").hide(); 
} 

/* on click get lead_id */ 
function my_onclick(data) 
{ 
    showLoading(); 
    $("#content").slideUp(5); 
    $.post("ajax/pc-details.php", 
    {'lead_id': data}, 
     function(data) 
     { 
     hideLoading(); 
     $("#content").html(data).slideDown(500); 
} 

); 
} 

tente également d'ajouter le spectacle/code cacher sur cette page: http://www.datatables.net/blog/Drill-down_rows

Demandez ce à ce jour, mais, rien ne se passe lorsque je clique sur le bouton details_open.

   $(document).ready(function() 
       { 
       var anOpen = []; 
       var oTable = $('#example').dataTable 
       ({ 
         'bProcessing': true, 
         'aaSorting': [[1,'asc']], // sorts date by default. 
         'iDisplayLength': 10, 
         'bJQueryUI': true, 
         'bServerSide': true, 
         'sAjaxSource': 'ajax/pc-ajax-table.php', 
         'fnServerData': function(sSource, aoData, fnCallback) 
        { 

         aoData.push({ "name": "from_date", "value": $("#from").val() }, 
            { "name": "to_date", "value": $("#to").val() }); 
        $.ajax 
         ({ 
          'dataType': 'json', 
          'type' : 'POST', 
          'url'  : sSource, 
          'data' : aoData, 
          'success' : fnCallback 
         }); 
        }, 
         'aoColumns':[ 
         {"bVisible": false, "bSortable": false, "bSearchable": true}, 
         {"fnRender": format_ddmmyyyy}, // renders the date as dd/mm/yyyy 
         null, 
         null, 
         null, 
         {"bVisible": false, "bSortable": false, "bSearchable": true}, 
         {"bVisible": false, "bSortable": false, "bSearchable": true}, 
         {"bVisible": false, "bSortable": false, "bSearchable": true}, 
         null, 
         null, 
         null, 
         null, 
         null] 
       }); 
       // for adding a details box 
      $('#example td.control').live('click', function() { 
       var nTr = this.parentNode; 
       var i = $.inArray(nTr, anOpen); 

       if (i === -1) { 
        $('img', this).attr('src', "../images/details_close.png"); 
        oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details'); 
        anOpen.push(nTr); 
       } 
       else { 
        $('img', this).attr('src', "../images/details_open.png"); 
        oTable.fnClose(nTr); 
        anOpen.splice(i, 1); 
       } 
      }); 

      function fnFormatDetails(oTable, nTr) 
      { 
       var oData = oTable.fnGetData(nTr); 
       var sOut = 
       '<div class="innerDetails">'+ 
        '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ 
        '<tr><td>Rendering engine:</td><td>'+oData.engine+'</td></tr>'+ 
        '<tr><td>Browser:</td><td>'+oData.browser+'</td></tr>'+ 
        '<tr><td>Platform:</td><td>'+oData.platform+'</td></tr>'+ 
        '<tr><td>Version:</td><td>'+oData.version+'</td></tr>'+ 
        '<tr><td>Grade:</td><td>'+oData.grade+'</td></tr>'+ 
        '</table>'+ 
       '</div>'; 
       return sOut; 
      } 

code pour générer l'image:

->add_column('moreinfo', '<span style="cursor:pointer"><img src="../images/details_open.png" alt="img" class="img" name="img"/></span>', 'leads.lead_id') 

Answer 1

avons décidé d'essayer le script show/hide officiel et qui ont réussi à le faire fonctionner.