使用Ajax Source的JQuery DataTable行显示/隐藏不起作用

问题描述：

大家好，

请帮忙。我做了很多研究，无法得到解决方案。尝试使用Ajax源复制此示例..

http： //datatables.net/examples/api/row_details.html [ ^ ]

这是我的代码：

Hi all,

Please help. I have done lot of research and can't get the solution. Trying to duplicate this example using Ajax source..

http://datatables.net/examples/api/row_details.html[^]

Here is my code:

<body id="dt_example">
<div id="container">                    <!-- Begin #Container -->

<div class="full_width big">List of Events</div>
<div id="demo">
<h3>Employees</h3>
<table id="the_table" class="display" cellpadding="0" cellspacing="0" border="0">
<thead>
    <tr>
        <th></th>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Telephone</th>
    </tr>
</thead>
<tbody>
</tbody>
</table>
<br />
            </div>
        </div>                                  <!-- End demo-->
</body>

var oTable;
function fnFormatDetails ( nTr )
{
    var aData = oTable.fnGetData( nTr );
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[3]+'</td></tr>';
    sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
    sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
    sOut += '</table>';

    return sOut;
}
$(document).ready(function() {

                oTable = $('#the_table').dataTable( {
                    "bProcessing" : true,
                    "sAjaxSource" : "getEmpListJSON.json",  // ajax to take the data
                    "aoColumns" : [ {
                                "bSortable": false
                                },{
                                "mData" : "id"
                                },{
                                "mData" : "firstname"
                                }, {
                                "mData" : "lastname"
                                }, {
                                "mData" : "email"
                                }, {
                                "mData" : "telephone"
                            } ],
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "aaSorting": [[1, 'asc']],
                  // "fnInitComplete": fnOpenClose
                });

                $('#example tbody td img').on( 'click', function () {
                    var nTr = $(this).parents('tr')[0];
                    if ( oTable.fnIsOpen(nTr) )
                    {
                        /* This row is already open - close it */
                        this.src = "resources/images/showhide_images/details_open.png";
                        oTable.fnClose( nTr );
                    }
                    else
                    {
                        /* Open this row */
                        this.src = "resources/images/showhide_images/details_close.png";
                        oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
                    }
                } );

            } );

我无法获得行显示/隐藏工作。任何建议。

谢谢。

I cannot get the row show/hide working. Any suggestions.

Thank you.

答

（document）.ready（function（）{

oTable =

(document).ready(function() { oTable =

（' ＃the_table'）。dataTable（{
bProcessing： true ，
sAjaxSource： getEmpListJSON.json， // ajax获取数据
aoColumns ：[{
bSortable： false
}，{
mData： id
}，{
mData： firstname
}， {
mData： lastname
}，{
mData： email
}，{
mData：电话
}]，
bJQueryUI： true ，
sPaginationType ： full_numbers，
aaSorting：[[ 1 ，' asc']]，
// fnInitComplete：fnOpenClose
}）;

('#the_table').dataTable( { "bProcessing" : true, "sAjaxSource" : "getEmpListJSON.json", // ajax to take the data "aoColumns" : [ { "bSortable": false },{ "mData" : "id" },{ "mData" : "firstname" }, { "mData" : "lastname" }, { "mData" : "email" }, { "mData" : "telephone" } ], "bJQueryUI": true, "sPaginationType": "full_numbers", "aaSorting": [[1, 'asc']], // "fnInitComplete": fnOpenClose });

（' ＃example tbody td img'n>）。on（' click'，function（）{
var nTr =

('#example tbody td img').on( 'click', function () { var nTr =

使用Ajax Source的JQuery DataTable行显示/隐藏不起作用

相关推荐