jquery - 带有隐藏行/行 ID 的数据表/服务器端处理如图所示

Question

我正在使用 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 位于底部，这是传递给数据表的内容，该数组是为了可读性):

Array
(
    [sEcho] => 0
    [iTotalRecords] => 3
    [iTotalDisplayRecords] => 3
    [aaData] => Array
        (
            [0] => Array
                (
                    [0] => <img src="images/details_open.png">
                    [1] => 1
                    [2] => Company 1
                    [3] => Joe Bob
                    [4] => 123-456-7890
                    [5] => admin@here.com
                    [6] => 123 My Way
                    [7] => Fayetteville
                    [8] => AR
                    [9] => 12345
                    [10] => This is a note for this customer, 1
                    [extra] => hrmll
                    [DT_RowId] => 1
                )

            [1] => Array
                (
                    [0] => <img src="images/details_open.png">
                    [1] => 2
                    [2] => Aaron's Floor Cleaning
                    [3] => Aaron Man
                    [4] => (133) 456-7890
                    [5] => email@there.com
                    [6] => 321. There Way
                    [7] => Scottsdale
                    [8] => AR
                    [9] => 54327
                    [10] => This is another note, but about another customer, 36

                    [extra] => hrmll
                    [DT_RowId] => 2
                )

            [2] => Array
                (
                    [0] => <img src="images/details_open.png">
                    [1] => 4
                    [2] => Carpet By Joe
                    [3] => Joe
                    [4] => 123-456-7890
                    [5] => ad@here.com
                    [6] => 123 SW Way Over St.
                    [7] => Springfield
                    [8] => AL
                    [9] => 87654
                    [10] => This is a note here.
                    [extra] => hrmll
                    [DT_RowId] => 4
                )

        )

)

{"sEcho":0,"iTotalRecords":"3","iTotalDisplayRecords":"3","aaData":[{"0":"<img src=\"images\/details_open.png\">","1":"1","2":"Company 1","3":"Joe Bob","4":"123-456-7890","5":"admin@here.com","6":"123 My Way","7":"Fayetteville","8":"AR","9":"12345","10":"This is a note for this customer, 1","extra":"hrmll","DT_RowId":"1"},{"0":"<img src=\"images\/details_open.png\">","1":"2","2":"Aaron's Floor Cleaning","3":"Aaron Man","4":"(133) 456-7890","5":"email@there.com","6":"321. There Way","7":"Scottsdale","8":"AR","9":"54327","10":"This is another note, but about another customer, 36\n","extra":"hrmll","DT_RowId":"2"},{"0":"<img src=\"images\/details_open.png\">","1":"4","2":"Carpet By Joe","3":"Joe","4":"123-456-7890","5":"ad@here.com","6":"123 SW Way Over St.","7":"Springfield","8":"AL","9":"87654","10":"This is a note here.","extra":"hrmll","DT_RowId":"4"}]}

这是表格的 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”的新版本，所以我改用了它。您的其他建议促使我重新考虑我的其他一些代码。非常感谢。

Answer 1

似乎 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");
                 }
    
             }
         },