Expendable Details Column disapear after 10 rows

zagloo

Hello !

I'm using DATATABLES to complete my table from ajax informations.

var oTable =  $('#sample_1').dataTable();

function autocomplete_tableau_err(tab_err) {
  $('#sample_1').dataTable().fnClearTable();
  $('#sample_1').dataTable().fnDestroy();
  var oTable_init = $('#sample_1').dataTable({
     "autoWidth": true,
     "bDeferRender": true,
     "bFilter": true,
     "bProcessing": true,
     "bPaginate": true,
     "sPaginationType": "full_numbers",
     "bSort": true,
     "iDisplayLength": 10,
     "aaSorting": [[ 0, 'asc' ]],
      "aoColumns": [
      { "bSortable": false},
      { "bSortable": true},
      { "bSortable": true},
      { "bSortable": true},
      { "bSortable": true},
      { "bSortable": false, "bVisible": false},
      { "bSortable": false, "bVisible": false},
      { "bSortable": false, "bVisible": false},
      { "bSortable": false, "bVisible": false},
    ],
    "aoColumnDefs": [{
                        'bSortable': false,
                        'aTargets': [1]
                    }
                ],
     "aLengthMenu": [[5, 10, 15, 20, 50, -1], [5, 10, 15, 20, 50, "Tout"]],
  });

  $.each(tab_err, function (index,value){
       $('#sample_1').dataTable().fnAddData( [
          "<td><input type='checkbox' class='checkboxes' value='"+tab_err[index].id_erreur_sql+"'/></td>",
          tab_err[index].date_erreur_sql, 
          tab_err[index].user_name, 
          tab_err[index].pseudo_utilisateur, 
          tab_err[index].fichier_erreur,
          tab_err[index].detail_erreur,
          tab_err[index].requete,
          tab_err[index].ligne_erreur,
          tab_err[index].adresse_ip_utilisateur,
          ]
        );
  });

After this, I create a column "Expandable Details" like here: http://datatables.net/examples/api/row_details.html

//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 centre_info" style="margin-left: 25%"></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] );
  } );

  $("#sample_1 thead tr th:first").append("<span class ='collaps_all_details icon-plus-sign2'></span> <span class ='collaps_all_details icon-minus-sign-alt'></span>");

And after, I format the function for row details /

* Formatting function for row details */
  function fnFormatDetails ( oTable, nTr ){
      var aData = oTable.fnGetData( nTr );
      var sOut = '<table>';
      sOut += '<tr><td>Détails erreur : '+aData[5]+'</td></tr>';
      sOut += '<tr><td>Requête : '+aData[6]+'</td></tr>';
      sOut += '<tr><td>Ligne erreur : '+aData[7]+'</td></tr>';
      sOut += '<tr><td>IP utilisateur : '+aData[8]+'</td></tr>';
      sOut += '</table>';

      return sOut;
  }

The result is like that : row 0 to 10 OK
http://i.stack.imgur.com/pQkoL.jpg

But if I show more than 10 rows or if I change the page, all "expand details button" disappear and all rows are shifted to the left... Examples : more 10 rows Next page after the 1st
http://i.stack.imgur.com/nxjkG.jpg

or

http://i.stack.imgur.com/u84aO.jpg

How can I resolve that please ?