jquery - 具有隐藏行/行 ID 的数据表/服务器端处理显示为图像

Question

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

它运行良好，除了每一行都有一个“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”的较新版本，所以我改用它。您的其他建议使我重新考虑我的其他一些代码。非常感谢你。

score 1 · Accepted Answer

似乎 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 的数据表/服务器端处理显示为图像

1 回答 1

Related

Reference