javascript - 数据表。在循环中隐藏/显示多行

Question

此问题针对 JQuery 的 Datatables 插件。

我有包含 3 种语言的 HTML 表格 en、ru、fr。例如，如果选择英语，则应隐藏法语和俄语条目，如果选择俄语，则应隐藏法语和英语条目等。

在 HTML 表格中 id 看起来像:

etc_1_en
etc_1_ru
etc_1_fr
etc_2_en
etc_2_ru
etc_2_fr
etc_3_en
etc_3_ru
etc_3_fr
...

但每个条目都有相同的类:行

像这样的 HTML 表格:

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr id="etc_1_en" class="row">
      <td>Etc 1</td>
      <td>Etc 2</td>
    </tr>
    <tr id="etc_1_ru" class="row">
      <td>Etc 3</td>
      <td>Etc 4</td>
    </tr>   
    <tr id="etc_1_fr" class="row">
      <td>Etc 5</td>
      <td>Etc 6</td>
    </tr>   
    <tr id="etc_2_en" class="row">
      <td>Foo 1</td>
      <td>Foo 2</td>
    </tr>
    <tr id="etc_2_ru" class="row">
      <td>Foo 3</td>
      <td>Foo 4</td>
    </tr>   
    <tr id="etc_2_fr" class="row">
      <td>Foo 5</td>
      <td>Foo 6</td>
    </tr>       
  </tbody>
</table>

有 3 个 ID 如下的按钮:

btn_id_en
btn_id_ru
btn_id_fr

但是每个按钮都有相同的类:btn

这是 JQuery 代码:

tbl = $('#myTable').DataTable();
var rows = tbl.rows().data();

// there looping through all entries
rows.each(function (row, index) {
    var row = tbl.row(index);
    var data = row.data();
    var id = row.id();

    // there trying to assign each row to child variable (using Datatable)
    var child = row.child;      

    if (/* some conditions */) {  // if / else conditions is working, tested with console.log();           

        // this part not working, something wrong with child maybe
        child.show();

    } else {

        // this part not working, something wrong with child maybe
        child.hide();
    }
}

row.id() 返回每行的正确 ID(通过 console.log(id); 测试)。问题是 hide 不起作用。我认为声明 child 有问题。

也许我必须使用 remove() 而不是 hide()，但在这种情况下，如何在单击另一个按钮后恢复它？

你有什么想法吗？

Answer 1

如果您的用例只是简单地使用按钮，那么这应该可行:

var lang = ""

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
        var thisId = Object.keys(settings.aIds)[dataIndex].split("_")[2]
        return thisId === lang;
    }
);

var table = $('#example').DataTable({
    "language": {
        "infoFiltered": ""
    }
});

$(".filter").click(function(e) {
    lang = $(e.target).attr("id").split("_")[2];
    table.draw();
});

在这里工作 JSFiddle:https://jsfiddle.net/annoyingmouse/opu869ko/