Fatal编程技术网
  • javascript/
  • Javascript 数据表-显示额外/详细信息-重新初始化问题

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

javascript jquery datatables

Javascript 数据表-显示额外/详细信息-重新初始化问题,javascript,jquery,datatables,Javascript,Jquery,Datatables,我对所描述的datatables功能有问题。 当我初始化它一次时，它工作得很好-所有的行按设计展开和隐藏。当我想用其他数据重新初始化它时（假设用户启动了另一个搜索查询），它会从服务器中提取数据，显示数据，但扩展和隐藏功能不起作用。这是我的密码： function mitarbeitersuche(sButtonName, sQuery) { if(typeof sQuery === "undefined") { var sQuery = $('#search-fi

我对所描述的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>';}

函数mitarbeitersuche（sButtonName，sQuery）{
if（类型sQuery==“未定义”）{
var sQuery=$（“#搜索字段”）.val（）；
}           
var sURL=”http://localhost/phb/index.php?kriterium=“+sQuery+”&ButtonName=“+sButtonName；
$（'.dataTables_wrapper'）.hide（）；
$（'mitarbeitersuche'）.show（）；
var oTable=$（'mitarbeitersuche'）。数据表（{
“语言”：{
“emptyTable”：“没有匹配的搜索结果。”
},                
摧毁：没错，
“bProcessing”：正确，
“bServerSide”：false，
“sAjaxSource”：苏尔，
“aoColumns”：[
{
“className”：“详细信息控制”，
“可订购”：错误，
“数据”：空，
“defaultContent”：”
},
{“数据”：“vorname”}，
{“数据”：“nachname”}，
{“数据”：“pin”}，
{“数据”：“banktitle”}，
{“数据”：“telefon”}，
{“数据”：“dw”}，
{“数据”：“团队”}
],
“订单”：[[1，‘asc']]
} );
//为打开和关闭详细信息添加事件侦听器
$（'mitarbeitersuche tbody'）。在（'click'，'td.details control'，函数（）{
var tr=$（this.nexist（'tr'）；
var行=可旋转行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}
否则{
//打开这一排
row.child（格式（row.data（））.show（）；
tr.addClass（“显示”）；
}
} );
}
函数格式（d）{
//`d`是该行的原始数据对象
var varTitle=（d.ma！=''），'+d.ma:''；
var varAusbildung=（d.ausbildung==0）？“不”：“Ja”；
var varBankTitle=（d.banktitle==null）？“”：d.banktitle；
返回“”+
''+
''+''+d.titel+''+d.vorname+''+d.nachname+varTitle+''+
''+varBankTitle+''+
''+ 
''+
“班克泰尔”+
''+varBankTitle+''+
''+ 
''+
“在澳大利亚”+
“+varAusbildung+”+
''+    
''+
“Funktion（外部）”一词+
“+d.fextern+”+
''+    
''+    
“支持”+
“+d.支持+”+
''+    
''+    
“teambezeichung”+
''+
''+       
'';}
因此，基本上，当我重新初始化它时，我得到了
oTable.row（tr）
空，而当我第一次初始化它时，它包含一个row对象。无论用户将重新初始化它多少次，您知道如何使它工作吗？我将感谢您的帮助。

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

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

varotable；
jQuery（文档）.ready（函数（$）{
$（'mitarbeitersuche'）。在（'click'，'td.details control'，函数（）{
var tr=$（this.nexist（'tr'）；
var行=可旋转行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}
否则{
//打开这一排
row.child（格式（row.data（））.show（）；
tr.addClass（“显示”）；
}
} );
函数mitarbeitersuche（sButtonName、sQuery、sPage）{
if（类型sQuery==“未定义”）{
var sQuery=$（“#搜索字段”）.val（）；
}
如果（空间类型==“未定义”）{
var sPage=‘指数’；
}        
var sURL=”http://localhost/phb/“+sPage+”.php？kriterium=“+sQuery+”&ButtonName=“+sButtonName；
$（'.dataTables_wrapper'）.hide（）；
$（“#主内容”）.children（）.hide（）；
$（“#搜索结果”）.show（）；
$（'mitarbeitersuche'）.show（）；
oTable=$（'mitarbeitersuche'）。数据表（{
“语言”：{
“emptyTable”：“没有匹配的搜索结果。”
},                
摧毁：没错，
“bProcessing”：正确，
“bServerSide”：false，
“sAjaxSource”：苏尔，
“aoColumns”：[
{
“className”：“详细信息控制”，
“可订购”：错误，
“数据”：空，
“defaultContent”：”
},
{“数据”：“vorname”}，
{“数据”：“nachname”}，
{“数据”：“pin”}，
{“数据”：“banktitle”}，
{“数据”：“telefon”}，
{“数据”：“dw”}，
{“数据”：“团队”}
],
“订单”：[[4，‘说明’]，[2，‘asc’]]，
“columnDefs”：[
{“宽度”：“15%”，“目标”：5}
]
} );
函数格式（d）{
//`d`是该行的原始数据对象
var varTitle=（d.ma！=''），'+d.ma:''；
var varAusbildung=（d.ausbildung==0）？“不”：“Ja”；
var varBankTitle=（d.banktitle==null）？“”：d.banktitle；
返回“”+
''+
''+''+d.titel+''+d.vorname+''+d.nachname+varTitle+''+
''+
''+ 
''+
“班克泰尔”+
''+varBankTitle+''+
''+ 
''+
“在澳大利亚”+
“+varAusbildung+”+
''+