数据表响应不适用于动态添加的行 [英] Datatables responsive doesn't apply to dynamically added row

问题描述

我有一个数据表与Datatables响应扩展。当表格缩小时，右侧的列会按预期方式隐藏。但是如果我动态地添加另一行数据，那么新行就不会得到隐藏的列。

我尝试绑定表，如下所示：

  var table = $（'。mytable'）DataTable（{respond：true}）; 
  

然后在动态地将数据行附加到表后，我尝试了这些命令来重新初始化响应，如在文档中建议（

解决方案

您不应该使用 append（）添加新行，因为jQuery DataTables不知道这一行，因此它不能使其响应。

使用 row.add（） 添加新行的API方法。您之后不需要调用 columns.adjust（）和 respond.recalc（）。

例如，使用下面的代码，而不是调用 step_data（）和 append ）：

  var rowNode = table 
 .row .add（[nextstep，'（values）'，'（data）'，'< button> Button< / button>']）
 .draw（）
 .node（） 
 
 $（rowNode）
 .attr（'id'，'row_'+ data）
  

I have a table of data with the Datatables responsive extension. When the table is downsized the columns from right gets hidden as expected. But if I dynamically add another row of data the new row doesn't get the hidden columns.

I tried binding the table as below:

var table = $('.mytable').DataTable({ responsive: true });

Then after dynamically appending a data row to the table, I tried these commands to reinitialize the responsiveness, as suggested in the documentation (https://datatables.net/reference/api/responsive.recalc%28%29):

table.columns.adjust();
table.responsive.recalc();

I have also tried the responsive.rebuild()-function without luck. Anyone knows how to sort this?

EDIT, here is a simplified description of how rows are appended

function step_data(step_id, nextstep)
    {
        var data = '<tr id="row_' + step_id + '"><td>' + nextstep + '</td><td>(values)</span></td><td>(data)</td><td><button>Button</button></td></tr>';
        return data;
    }
$('#addstep').click(function(e){
        e.preventDefault();
        $.post(
           '/control/addstep',
           {'timeline_id':(xxx) }, 
           function(data){
              var row = step_data(data, nextstep);
              $('#sortablearea').append(row);
              nextstep++;
              table.columns.adjust();
              table.responsive.recalc(); // this doesn't have effect
            }
        );
    });

What happens is that the added row breaks the mobile layout and all columns are visible in the added row (row 4 was loaded with the page, row 5 is added dynamically):

解决方案

You shouldn't use append() to append new rows since jQuery DataTables is not aware of this new row and therefore it cannot make it responsive.

Use row.add() API method to add a new row. You don't need to call columns.adjust() and responsive.recalc() afterwards.

For example, use the code below instead of calling step_data() and append():

var rowNode = table
   .row.add( [ nextstep, '(values)', '(data)', '<button>Button</button>' ] )
   .draw()
   .node();

$( rowNode )
   .attr( 'id', 'row_' + data )

这篇关于数据表响应不适用于动态添加的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！