DataTables - 为每行添加可扩展的详细信息

Question

我需要为数据表的每一行添加可扩展详细信息，如下所示：

http://www.datatables.net/release-datatables/examples/api/row_details.html

我有这个HTML：

<table class="table table-striped table-bordered table-hover" id="sample_1">
    <thead>
       <tr>
         <th>Date</th>
         <th>User Name</th>
         <th>Adresse IP Utilisateur</th>
         <th>Pseudo Utilisateur</th>
       </tr>
    </thead>
    <tbody>
            </tbody>
</table>

这个Javascript ajax女巫返回我需要放在我的表中的数据：

function liste_erreurs_sql() {
    $.ajax({
        url:"/administration/log_mysql/script/recuperation_erreurs_sql.php",
        dataType:"JSON",
        type:"GET",
        success: function(err){
                autocomplete_tableau_err(err.tableau_erreurs_mysql);
        }
    });

AJAX数组：

这个用于DataTAbles的Javascript：

 function autocomplete_tableau_err(tab_err) {
  $('#sample_1').dataTable().fnClearTable();
  $('#sample_1').dataTable().fnDestroy();
  $('#sample_1').dataTable({
     "bDeferRender": true,
     "bProcessing": true,
     "bPaginate": true,
     "sPaginationType": "full_numbers",
     "bSort": true,
     "iDisplayLength": 10,
     "aaSorting": [[ 1, 'asc' ]],
     "aoColumns": [
      { "bSortable": true},
      { "bSortable": true},
      { "bSortable": true},
      { "bSortable": true},
    ],
    }
  });

使用ajax信息自动填充我的表：

 $.each(tab_err, function (index,value){
       $('#sample_1').dataTable().fnAddData( [
          tab_err[index].date_erreur_sql, 
          tab_err[index].user_name, 
          tab_err[index].adresse_ip_utilisateur, 
          tab_err[index].pseudo_utilisateur, ]
        );

这是我的问题......如何添加可扩展的详细信息？

我尝试了两种解决方案，但每种方法都有很多错误......  效率最高的：

$.each(tab_err, function (index,value){
       $('#sample_1').dataTable().fnAddData( [
          tab_err[index].date_erreur_sql, 
          tab_err[index].user_name, 
          tab_err[index].adresse_ip_utilisateur, 
          tab_err[index].pseudo_utilisateur, ]
        );


        /* Formatting function for row details */
        function format (tab_err) {
// `tab_err` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>'+
        '<td>Full name:</td>'+
        '<td>'+tab_err[index].user_name+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Extension number:</td>'+
        '<td>'+tab_err[index].pseudo_utilisateur+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Extra info:</td>'+
        '<td>And any further details here (images etc)...</td>'+
    '</tr>'+
'</table>';

}

  });

        //Insert a 'details' column to the table
        var nCloneTh = document.createElement( 'th' );
        var nCloneTd = document.createElement( 'td' );
        nCloneTd.innerHTML = '<span class="row-details icon-plus-sign2"></span>';

        $('#sample_1 thead tr').each( function () {
            this.insertBefore( nCloneTh, this.childNodes[0] );
        } );

        $('#sample_1 tbody tr').each( function () {
            this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
        } );



   /* Add event listener for opening and closing details
         * Note that the indicator for showing which row is open is not controlled by DataTables,
         * rather it is done here
         */
        $('#sample_1').on('click', ' tbody td .row-details', function () {
            var nTr = $(this).parents('tr')[0];
            var oTable = $('#sample_1').dataTable();
            if ( oTable.fnIsOpen(nTr) )
            {
                /* This row is already open - close it */
                $(this).addClass("icon-plus-sign2").removeClass("icon-minus-sign-alt");
                oTable.fnClose( nTr );
            }
            else
            {
                /* Open this row */                
                $(this).addClass("icon-minus-sign-alt").removeClass("icon-plus-sign2");
                oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
            }
        });

错误：Uncaught ReferenceError: fnFormatDetails is not defined