2013-02-22 85 views
0

我在我的应用程序上使用DataTables作为数据网格管理器。一切工作正常,但直到我配备了隐藏行信息插件。我尝试了很多方法来改变事物,但第一列切换图像从未出现过。这里是我的代码:DataTables:aoColumns不显示切换图像列

的Javascript

var oTable; 
/* Formating function for row details */ 
function fnFormatDetails(nTr){ 
    var aData=oTable.fnGetData(nTr); 
    var sOut='<table cellpadding="7" cellspacing="0" border="0" style="border:solid 1px red;padding-left:50px;">'; 
    sOut+='<tr><td>Renderingengine:</td><td>'+aData[2]+''+aData[3]+'</td></tr>'; 
    sOut+='<tr><td>Linktosource:</td><td>Couldprovidealinkhere</td></tr>'; 
    sOut+='<tr><td>Extrainfo:</td><td>Andanyfurtherdetailshere(imagesetc)</td></tr>'; 
    sOut+='</table>'; 
    return sOut; 
} 

$(document).ready(function() { 
    oTable=$('#labour_show').dataTable({ 
     "fnDrawCallback": function(){//row highlighter 
       $('table#labour_show td').bind('mouseenter', function() { $(this).parent().children().each(function(){$(this).addClass('datatablerowhighlight');}); }); 
       $('table#labour_show td').bind('mouseleave', function() { $(this).parent().children().each(function(){$(this).removeClass('datatablerowhighlight');}); }); 
     }, 
     "bProcessing": true, 
     "bServerSide": true, 
     "sAjaxSource": "inc/_labour_show_ajax.php",     
     "aoColumns":[null,null,null,{"fnRender": function(oObj){return "<a href='main.php?do=labour&action=edit&sid=" + oObj.aData[7] + "'>Edit</a>";} }],"aaSorting": [[1, 'asc']] 
    }); 

    $('#labour_show tbody td img').live('click',function(){ 
     var nTr = this.parentNode.parentNode; 
     if(this.src.match('details_close')){ 
      /* This row is already open - close it */ 
      this.src = "images/ico_expand.png"; 
      oTable.fnClose(nTr); 
     }else{ 
      /* Open this row */ 
      this.src = "images/ico_collapse.png"; 
      oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details'); 
     } 
    }); 
}); 

_labour_show_ajax.php

这是从服务器端脚本的阵列

$aColumns = array('labr_uid', 'labr_fname', 'emplyr_comp','labr_sid'); 

HTML代码:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="labour_show"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Passport</th> 
      <th>Name</th> 
      <th width="30%">Employer</th>   
      <th>Edit</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td colspan="5" class="dataTables_empty"><img src="images/loading.gif" /></td> 
     </tr> 
    </tbody> 

屏幕截图

toggle image column not display

不管我试过。第一列从未出现过。请建议。

回答

0

试试这个,,我认为你缺少对别人的{ "sClass": "" }

"aoColumns": [ 
         { "sClass": "", "bSortable": false }, 
         null, 
         null, 
         null, 
         { "sClass": "" }, 
         { "sClass": "" }, 
         {"fnRender": function(oObj){return "<a href='main.php?do=labour&action=edit&sid=" + oObj.aData[7] + "'>Edit</a>";}} 
       ], 
1

我在你的HTML表格数5列,并在aoColumns 4

要么添加另一个空

"aoColumns":[ 
null, 
null, 
null, 
null, 
{"fnRender": function(oObj){return "<a href='main.php?do=labour&action=edit&sid=" + oObj.aData[7] + "'>Edit</a>";} }], 

or do mData并加上这个

{ "mData": null , 
    "mRender" : function (data, type, full) { 
    return '<img src="images/ico_open.png" />';} 
    }, 

物质的事实,我相信mRender是选择已经结束fnRender,你可以取代你的fnRender以及这样

{ "mData": null , // or aAData[4] or aaData['labor_sid'] 
    "mRender" : function (data, type, full) { 
    return '<a href="main.php?do=labor&action=edit&sid='+full[4]+'">Edit</a>';} 
    }, 

继承人之间的连结,所以我回答一下吧Adding a link to datatables for more information