0

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

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>

截屏

切换图像列不显示

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

4

2 回答 2

2

我在你的 html 表中计算了 5 列，在你的 aoColumns 中计算了 4

要么添加另一个 null

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

或者做 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>';}
  },

继承人链接到另一个我回答了关于它的链接添加到数据表的链接以获取更多信息

于 2013-06-05T00:15:46.773 回答
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>";}}
                ],
于 2013-02-28T20:31:01.180 回答