javascript - Jquery 数据表重新初始化

Question

我正在从多个工作表中读取 Google 电子表格中的数据，并以表格格式显示检索到的数据。一旦检索到数据，我就会在 ajax 调用中创建包含数据的表行，即

$tbody.append('<tr><td>'+rows[i][6]+'</td>'+'<td>'+rows[i][0]+'</td><td>'+rows[i][1]+'</td><td>'+rows[i][2]+'</td><td>'+rows[i][3]+'</td><td>'+rows[i][4]+'</td><td>'+rows[i][5]+'</td><td><a id="UpdateLink" href="#">Update</a></tr>');   

在第一次运行时，数据显示正常，但当我碰巧有来自另一张工作表的数据时，我发现没有应用分页，并且当我单击任何标题列来执行排序时，它会显示第一张工作表中的数据。

根据谷歌建议对数据表使用 destroy 属性，即$("#spreadsheetdata).DataTable({销毁:真});但行为保持不变。我也申请了

if ( $.fn.dataTable.isDataTable( '#spreadsheetdata' ) ) {
        //dataTableInstance = $('#spreadsheetdata').DataTable();
    }
    else {
        dataTableInstance = $('#spreadsheetdata').DataTable( {
            paging:true,
            ordering:true,
            info:true
        });
    }   

但没有取得理想的结果。请指导谢谢。

Answer 1

您需要使用 DataTables row.add()，而不是使用 jQuery 附加方法添加行。方法。

如果 dataTableInstance 是您分配给表格的变量，而 rows 是 Google 电子表格中的数据数组，则此语法应允许您附加新行到现有表:

dataTableInstance.row.add([
  rows[i][6],
  rows[i][0],
  rows[i][1],
  rows[i][2],
  rows[i][3],
  rows[i][4],
  rows[i][5],
  '<a id="UpdateLink" href="#">Update</a>'
]).draw();

使用 jQuery 附加新行不起作用的原因是 DataTables 维护自己的客户端状态 - 请参阅 search() , order() ，和 page()举些例子。

因此，如果您直接将行添加到表体中，那么一旦您进行排序、搜索等操作，它们就会消失。