时间戳

首页 > 解决方案 > 如何按id过滤行并重绘数据表

javascript - 如何按id过滤行并重绘数据表

问题描述

我想通过 id 数组过滤数据表行并重绘过滤后的表。但是，我无法通过rows(...).invalidate().data().draw(...).

这是一个玩具示例

显示第 1、4 和 10 行的 JS 片段：

$(document).ready( function () {
  var table = $('#example').DataTable();
  
  $('#getData').on('click', function() {
    console.log("hey");
    table.rows([0, 3, 9]).draw();
  })
} );

我的预期输出将是只看到那 3 行，但我仍然看到完整的表格。

我还在考虑一个我不会显示但只能用于搜索目的的 ID 列column(0).search(id_column in ids)

标签： javascriptdatatables

解决方案

如果要过滤数据，则可以使用 column().search() 查找包含数据的行：

$(document).ready( function () {
  var table = $('#example').DataTable();
  
  $('#getData').on('click', function() {
    table.column(2).search('London').draw();
  })
} );

在这里，代码将搜索第二列中包含数据“London”的所有行并重新绘制表格。

要基于行索引进行过滤，您可以添加自定义过滤器并基于此过滤您的数据表。

var ids = [];
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        if ($.inArray(dataIndex, ids) > -1) {
            return false;
        }
        else {
            return true;
        }
    }
    );
  
$(document).ready( function () {
  var table = $('#example').DataTable();  // The table draws with full data.

  // Update your array of indexes. This can be as a result of an ajax query or your custom logic. So next time the  button is clicked, table would be redrawn with those rows excluded.
  ids = [0,1,2,3];
  $('#getData').on('click', function() {
    table.draw();
  });
} );

在上面的代码中，您可以在重绘之前更新您的数组 ID（在您的情况下，在单击按钮之前）。

推荐阅读