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列を数えます

別のヌルを追加するか

"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>';}
  },

Heres a link to another SO 私はそれについて答えました 詳細については、データテーブルへのリンクを追加します

于 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 に答える