jquery - 非表示の行/行 ID を使用した DataTables/サーバー側の処理が画像として表示される

Question

サーバー側の処理と非表示の詳細行を使用して、jquery-datatables-editable とともに DataTables を使用しています。

非表示の詳細行を表示するクリック可能な画像に等しい「id」が各行に与えられていることを除いて、うまく機能しています。たとえば、テーブルの各行 (firebug または chrome 要素インスペクターから表示) は次のようになります。

<tr id="&lt;img src=&quot;images/details_open.png&quot;&gt;" class="odd">
<td class="center"><img src="images/details_open.png"></td>
<td class=" sorting_1">Carpet By Joe</td>
<td class="">Joe</td><td class="">123-456-7890</td>
<td class="">ad@here.com</td>
</tr>

これがJavaScriptです：

$(document).ready(function() {
    var what = "customer";
    /* Init DataTables */
    var oTable = $('#example').dataTable({
        "bJQueryUI" : true,
        //"bProcessing" : true,
        "bServerSide" : true,
        "sPaginationType" : "full_numbers",
        "sAjaxSource" : "lib/gen.php?what=" + what,

        "aoColumns" : [{
            "sClass" : "center",
            "bSortable" : false,
        }, {
            "sName" : "name",
            "mData" : "2"
        }, {
            "sName" : "contact",
            "mData" : "3"
        }, {
            "sName" : "phone",
            "mData" : "4"
        }, {
            "sName" : "email",
            "mData" : "5"
        }],
        "aaSorting" : [[1, 'desc']]
    }).makeEditable({

        sUpdateURL : "lib/edit.php?what=" + what + "&action=edit",
        sAddURL : "lib/edit.php?what=" + what + "&action=add",
        sDeleteURL : "DeleteData.php",
        sAddDeleteToolbarSelector : ".dataTables_length",
        "oAddNewRowFormOptions" : {
            "title" : "Add A New Customer",
            "width" : 400,
            "height" : 450
        },
        "aoColumns" : [null, {
            cssclass : 'required'
        }, {
            indicator : "<img src='images/indicator.gif'>",
            tooltip : "Doubleclick to edit...",
            event : "dblclick",
            style : "inherit",

        }]
    });

    /* Formating function for row details */
    function fnFormatDetails(nTr) {
        var aData = oTable.fnGetData(nTr);
        //var id = aData[1];
        var sOut = '<div>';
        var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
        sOut += '<tr><th width="75" align="left">&nbsp;</th><th width="300" align="left">Address Information</th><th align="left">Notes</th></tr>';
        sOut += '<tr><td><strong>Address: </strong></td><td class="5"><div class="edittable">' + aData[6] + '</div></td><td  style="vertical-align: top;" class="9" rowspan="4"><div class="edittextarea">' + aData[10] + '</div></td></tr>';
        sOut += '<tr><td><strong>City: </strong></td><td class="6"><div class="edittable">' + aData[7] + '</div></td></tr>';
        sOut += '<tr><td><strong>State: </strong></td><td class="7"><div class="edittable">' + aData[8] + '</div></td></tr>';
        sOut += '<tr><td><strong>Zip: </strong></td><td class="8"><div class="edittable">' + aData[9] + '</div></td></tr>';
        sOut += '</table>';
        return sOut;
    }


    $('#example 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/details_open.png";
            oTable.fnClose(nTr);
        } else {
            /* Open this row */
            this.src = "images/details_close.png";
            oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details');
            //make_jeditable(nTr);
        }
    });

});

これが私のサーバー側処理からの出力です（jsonは一番下にあり、これはデータテーブルに渡されるものです。配列は読みやすくするためのものです）：

テーブルの HTML は次のとおりです。

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
    <tr>
        <th width="4%"></th>
        <th width="25%">Customer Name</th>
        <th width="20%">Contact</th>
        <th width="20%">Phone</th>
        <th width="25%">Email</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td colspan="8" class="dataTables_empty">Loading data from server</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th></th>
        <th>Customer Name</th>
        <th>Contact</th>
        <th>Phone</th>
        <th>Email</th>
    </tr>
</tfoot>
</table>

返された情報には 'DT_RowId' 項目がありますが、行の ID に解析されません。さらに情報を提供できる場合はお知らせください。

編集：

Aktee、あなたは天才です。

私はこれを削除しました：

[0] => <img src="images/details_open.png">

サーバー側の処理から完全に、そしてあなたの提案により、私のjavascriptの上部は次のようになります。

"aoColumns" : [{
    "sClass" : "center",
    "mData": function () {
        return '<img src="images/details_open.png">';
 },
    "bSortable" : false
},

「mData」は「mDataProp」の新しいバージョンであることがドキュメントに記載されていることに気付いたので、代わりにそれを使用しました。あなたの他の提案により、他のコードのいくつかを再考するようになりました。どうもありがとうございました。

score 1 · Accepted Answer

dataTable が [0] を ID 名として使用しているようです。これは悪いです。最後に押してみてください..

または、次のヒントを使用してください。

mData の代わりに mDataProp を使用します。コードを読むときに、より多くの制御が可能になり、より論理的になるでしょう。また、何かを追加するときに、正しいインデックスがあることを確認する必要はありません。
```
aoColumns: [
   { mDataProp: "customername", bSortable: true },
   { mDataProp: "contact", bSortable: true },
]
```
そして、JSON出力は次のようになります
```
[aaData] => Array
  (
    [0] => Array
        (
            [company] => Company 1
            [customername] => Joe Bob
```

いつも src="images/details_open.png" が [0] になっていることに気付きました。これは帯域幅の無駄です。代わりに、これを試してください

aoColumns: [

    [...]

   { mDataProp: function(x) {
      return '<img src="images/details_open.png">';
   }, bSortable: true },

]

このようなことができるので、これは非常に便利です。

aoColumns: [

    [...]

   { mDataProp: function(x) {
      return '<img src="images/details_open.png" data-id="' + x.id + '">';
   }, bSortable: true },

]

各行を編集する場合は、fnDrawCallBack... を使用します。

 fnDrawCallback: function ( oSettings ) {
         if ( oSettings.aiDisplay.length == 0 ) {
             return;
         }

         var TRs = $('#lst_production tbody tr');
         var iColspan = TRs[0].getElementsByTagName('td').length;

         for ( var i=0 ; i<TRs.length ; i++ ) {

             var iDisplayIndex = oSettings._iDisplayStart + i;
             data = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData;

             // add the ID to the row
             $(TRs[i]).attr("id", data.id);

             // add class red-background if customer is from AR
             if (data.state == 'AR') {
                 $(TRs[i]).addClass("red-background");
             }

         }
     },

jquery - 非表示の行/行 ID を使用した DataTables/サーバー側の処理が画像として表示される

1 に答える 1

Related

Reference