响应式数据表（createdRow）

Question

我正在使用 jQuery 具有响应式扩展 (responsive: true) 的数据表和以下源代码，它工作正常：

 "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>"
                      );

但是当我缩小浏览器的大小时，注册按钮消失了。

我认为问题在于，因为我已经创建了它，所以在 createdRow 行 responsive: true 中不适用于此按钮。

因此包含的库是：

    <!-- 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>

我正在使用 JSP。

Answer 1

我认为出现此问题是因为响应式扩展操作了 table 结构，但在 adding/removing 列时不调用 createdRow。

一般不建议使用createdRow为单元格生成内容，使用columns.render代替。

通过 columnDefs，您可以使用 targets 来定位特定列（在您的示例中为 9）。变量 full 包含整行的数据。

$('#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;
     }
  }]
});

响应式数据表（createdRow）

Responsive DataTables (createdRow)

css

jquery

jsp

servlets

datatables