使用Fancy Box点燃数据表

Question

我尝试过无法在表格中添加显示/隐藏额外的详细信息，所以我想尝试使用fancybox。我想要这样的事情：http://datatables.net/download/

已经有了这个，需要有人来填充触发器以显示框，任何帮助都会很棒。

        $(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);
}

);
}

还尝试在此页面上添加显示/隐藏代码： http://www.datatables.net/blog/Drill-down_rows

到目前为止，但是，当我点击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;
            }

生成图片的代码：

->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

决定尝试使用官方的show / hide脚本并设法使其正常运行。