Responsive DataTables (createdRow)

Question

I'm using jQuery DataTables with Responsive extension (responsive: true) and the following source code, it works fine:

 "createdRow": function ( row, data, index ) {
                var fechaFin = data[6];
                var diaActual = Date();
                var dateFechaFin = new Date(fechaFin.substr(6,9)+"-"+fechaFin.substr(3,2) +"-"+fechaFin.substr(0,2));
                  if ( data[8] != "0" ) { 
                      $('td', row).eq(9).html(
                         "<form id=\"formMatricula_"+ $('td', row).eq(0).html()+"\" action=\"/english/InscripcionPaso1\" method=\"POST\">" +
                         "<button id=\"botonMatricula_"+ $('td', row).eq(0).html()+"\" type=\"submit\" class=\"btn btn-xs f-r grad-gold f-w-b\">REGISTER</button></form>"
                      );

But when I reduce the size of the browser the button REGISTER disappears.

I think the problem is that, because I have created it, in createdRow and the line responsive: true, doesn't work for this button.

So the included libraries are:

    <!-- DataTables CSS 1.10.4-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/vendor/DataTables-1.10.4/media/css/jquery.dataTables.css">          
    <!-- jQuery 1.10.4 -->
    <script type="text/javascript" charset="utf8" src="${pageContext.request.contextPath}/vendor/DataTables-1.10.4/media/js/jquery.js"></script> 

    <!-- DataTables 1.10.4 -->
    <script type="text/javascript" charset="utf8" src="${pageContext.request.contextPath}/vendor/DataTables-1.10.4/media/js/jquery.dataTables.js"></script> 

    <script type="text/javascript" charset="utf8" src="${pageContext.request.contextPath}/publico/js/dataTables.responsive.js"></script>

I'm using JSP.

Answer 1

I believe the issue occurs because Responsive extension manipulates the table structure but doesn't call createdRow when adding/removing columns.

Generally, it is not recommended to use createdRow to generate content for the cell, use columns.render instead.

With columnDefs you can use targets to target a specific column (9 in your example). Variable full contains data for the whole row.

$('#example').dataTable({
  "columnDefs": [ {
    "targets": 9,
    "render": function(data, type, full, meta){
       if(type === 'display'){
          if ( full[8] != "0" ) { 
              data = 
                 "<form id=\"formMatricula_" + 
                 full[0] + 
                 "\" action=\"/english/InscripcionPaso1\" method=\"POST\">" +
                 "<button id=\"botonMatricula_" + 
                 full[0] +
                 "\" type=\"submit\" class=\"btn btn-xs f-r grad-gold f-w-b\">REGISTER</button></form>";
          }
       }
       return data;
     }
  }]
});