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

我遇到数据表功能描述here的问题。当我初始化它时，它工作正常 - 所有行都按设计扩展和隐藏。当我想用一些其他数据（假设用户启动另一个搜索查询）来重新初始化它时，它会从服务器拉取数据，显示它，但扩展和隐藏功能不起作用。这里是我的代码：Datatables - 显示额外/详细信息 - 重新初始化问题

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)空的，而当我初始化它首次包含一个行对象。任何想法如何让它工作，无论用户将重新初始化它多少次？我会感谢任何帮助。

来源

2015-03-31 crazylane

我把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>'; 
} 
}

我的问题的原因是多个执行事件侦听器定义代码。

来源

2015-04-28 14:06:53 crazylane

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

回答

相关问题