Question

我对here描述的数据表功能有疑问。它初始化一次时工作正常 - 所有行都按设计展开和隐藏。当我想用其他一些数据重新初始化时（让用户说启动另一个搜索查询），而不是从服务器提取数据，显示它，但扩展和隐藏功能并不起作用。这是我的代码：

function mitarbeitersuche(sButtonName, sQuery)  {
    if(typeof sQuery === "undefined") {
           var sQuery = $('#search-field').val();
    }           

    var sURL = "http://localhost/phb/index.php?kriterium=" + sQuery + "&ButtonName=" + sButtonName;
    $('.dataTables_wrapper').hide();
    $('#mitarbeitersuche').show();
    var oTable = $('#mitarbeitersuche').DataTable( {
        "language": {
            "emptyTable":     "No matching search results."
        },                
        destroy: true,
        "bProcessing": true,
        "bServerSide": false,
        "sAjaxSource": sURL,
        "aoColumns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''                        
            },
            { "data": "vorname" },
            { "data": "nachname" },
            { "data": "pin" },
            { "data": "banktitle" },                
            { "data": "telefon" },
            { "data": "dw" },
            { "data": "team" }

        ],
        "order": [[1, 'asc']]
    } );
        // Add event listener for opening and closing details
    $('#mitarbeitersuche tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = oTable.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');                        
        }
    } );
}
function format ( d ) {
// `d` is the original data object for the row
var varTitle = (d.ma != '') ? ', ' + d.ma : '';
var varAusbildung = (d.ausbildung == 0) ? 'Nein' : 'Ja';
var varBankTitle = (d.banktitle == null) ? '' : d.banktitle;
return  '<table class="table table-hover table-striped table-condensed table-bordered small" style="margin-top:20px;">'+
    '<tr>'+
        '<th><img class="img-rounded pull-left img-responsive" src="assets/images/p' + d.pin + '.jpg" alt=""><h4 class="pull-down">' + ' ' + d.titel + ' ' + d.vorname + ' ' + d.nachname + varTitle + '</h4></th>'+
        '<td>'+varBankTitle+'</td>'+
    '</tr>'+ 


    '<tr>'+
        '<th>Banktitel</th>'+
        '<td>'+varBankTitle+'</td>'+
    '</tr>'+ 
    '<tr>'+
        '<th>in Ausbildung</th>'+
        '<td>'+varAusbildung+'</td>'+
    '</tr>'+    
    '<tr>'+
        '<th>Funktion (extern)</th>'+
        '<td>'+d.fextern+'</td>'+
    '</tr>'+    
    '<tr>'+    
        '<th>Standort</th>'+
        '<td>'+d.standort+'</td>'+
    '</tr>'+    
    '<tr>'+    
        '<th>Teambezeichnung</th>'+
        '<td><a href="#" onclick="mitarbeitersuche(&quot;but2&quot;, '+ d.teamnr +')">'+d.team+' (Kst: '+ d.teamnr + ')</td>'+
    '</tr>'+    
    '<tr>'+    
        '<th>Team Kurzbezeichnung</th>'+
        '<td>'+d.oekurz+'</td>'+
    '</tr>'+
    '<tr>'+ 
        '<th>Fachfunktion</th>'+
        '<td>'+d.funktion+'</td>'+
    '</tr>'+
    '<tr>'+            
        '<th>Adresse</th>'+
        '<td>'+d.strasse+', ' + d.plz + ' ' + d.ort + '</td>'+
    '</tr>'+    
    '<tr>'+    
        '<th>Mobiltelefon</th>'+
        '<td>'+d.cell+'</td>'+
    '</tr>'+    
    '<tr>'+        
        '<th>Fax</th>'+
        '<td>'+d.persfax+'</td>'+
    '</tr>'+
    '<tr>'+    
        '<th>E-mail</th>'+
        '<td><a href="mailto:'+d.email+'">' + d.email + '</a></td>'+
    '</tr>'+       
'</table>';}

所以基本上当我重新初始化它时我得到oTable.row( tr )为空，而当我第一次初始化它时它包含一个行对象。无论用户重新初始化多少次，都知道如何使其工作？我会感激任何帮助。

Answer 1

我在mitarbeitersuche函数之外将oTable声明为全局，并且还将事件绑定移到了外部。所以现在我有：

var oTable;
jQuery(document).ready(function($) {
    $('#mitarbeitersuche').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = oTable.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');                        
        }
    } );
   function mitarbeitersuche(sButtonName, sQuery, sPage)  {
        if(typeof sQuery === "undefined") {
               var sQuery = $('#search-field').val();
        }
        if(typeof sPage === "undefined") {
               var sPage = 'index';
        }        
        var sURL = "http://localhost/phb/" + sPage + ".php?kriterium=" + sQuery + "&ButtonName=" + sButtonName;
        $('.dataTables_wrapper').hide();
        $("#main_content").children().hide();
        $('#search-results').show();
        $('#mitarbeitersuche').show();        
        oTable = $('#mitarbeitersuche').DataTable( {
            "language": {
                "emptyTable":     "No matching search results."
            },                
            destroy: true,
            "bProcessing": true,
            "bServerSide": false,
            "sAjaxSource": sURL,
            "aoColumns": [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''                        
                },
                { "data": "vorname" },
                { "data": "nachname" },
                { "data": "pin" },
                { "data": "banktitle" },                
                { "data": "telefon" },
                { "data": "dw" },
                { "data": "team" }

            ],
            "order": [[4, 'desc'], [2, 'asc']],
            "columnDefs": [
                { "width": "15%", "targets": 5 }
            ]
        } );
    function format ( d ) {
    // `d` is the original data object for the row
    var varTitle = (d.ma != '') ? ', ' + d.ma : '';
    var varAusbildung = (d.ausbildung == 0) ? 'Nein' : 'Ja';
    var varBankTitle = (d.banktitle == null) ? '' : d.banktitle;
    return  '<table class="table table-hover table-striped table-condensed table-bordered small" style="margin-top:20px;">'+
        '<tr>'+
            '<th><img onerror="imgError(this);" class="img-rounded pull-left img-responsive" src="assets/images/p' + d.pin + '.jpg" alt=""><h4 class="pull-down">' + ' ' + d.titel + ' ' + d.vorname + ' ' + d.nachname + varTitle + '</h4></th>'+
            '<td></td>'+
        '</tr>'+ 


        '<tr>'+
            '<th>Banktitel</th>'+
            '<td>'+varBankTitle+'</td>'+
        '</tr>'+ 
        '<tr>'+
            '<th>in Ausbildung</th>'+
            '<td>'+varAusbildung+'</td>'+
        '</tr>'+    
        '<tr>'+
            '<th>Funktion (extern)</th>'+
            '<td>'+d.fextern+'</td>'+
        '</tr>'+    
        '<tr>'+    
            '<th>Standort</th>'+
            '<td>'+d.standort+'</td>'+
        '</tr>'+    
        '<tr>'+    
            '<th>Teambezeichnung</th>'+
            '<td><a href="#" onclick="mitarbeitersuche(&quot;but2&quot;, '+ d.teamnr +', &quot;index&quot;)">'+d.team+' (Kst: '+ d.teamnr + ')</a></td>'+
        '</tr>'+    
        '<tr>'+    
            '<th>Team Kurzbezeichnung</th>'+
            '<td>'+d.oekurz+'</td>'+
        '</tr>'+
        '<tr>'+ 
            '<th>Fachfunktion</th>'+
            '<td>'+d.funktion+'</td>'+
        '</tr>'+
        '<tr>'+            
            '<th>Adresse</th>'+
            '<td>'+d.strasse+', ' + d.plz + ' ' + d.ort + '</td>'+
        '</tr>'+    
        '<tr>'+    
            '<th>Mobiltelefon</th>'+
            '<td>'+d.cell+'</td>'+
        '</tr>'+    
        '<tr>'+        
            '<th>Fax</th>'+
            '<td>'+d.persfax+'</td>'+
        '</tr>'+
        '<tr>'+    
            '<th>E-mail</th>'+
            '<td><a href="mailto:'+d.email+'">' + d.email + '</a></td>'+
        '</tr>'+       
    '</table>';
}
}

我遇到问题的原因是多次执行事件监听器定义代码。

数据表 - 显示额外/详细信息 - 重新初始化问题

1 个答案: