jquery - 带有隐藏的行/行ID的DataTables/服务器端处理显示为图像

我正在使用DataTables以及jquery-datatables-editable，并使用服务器端处理和隐藏的详细信息行。

它运作良好，除了为每行赋予一个“ id”，该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。请让我知道是否可以提供更多信息。

编辑：

阿克蒂，你真是个天才。

我删除了这个：

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

从服务器端进行整体处理，根据您的建议，我的javascript的顶部现在看起来像：

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

我在文档中注意到它提到“ mData”是“ mDataProp”的较新版本，因此我改用了它。您的其他建议使我重新考虑了其他一些代码。非常感谢你。

最佳答案

似乎dataTable使用[0]作为ID名称。这是不好的。最后尝试将其推下。

或使用以下提示：

使用mDataProp而不是mData。您将拥有更多的控制权，并且在阅读代码时将更具逻辑性。另外，添加内容时，不必确保索引正确。

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/服务器端处理显示为图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13864992/