Javascript 数据表。隐藏/显示循环中的多行

这个问题的目标是

Datatables

用于

JQuery

的插件

我有三种语言的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>

但每个按钮都有相同的类别：

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（通过

控制台.log（id）；

进行测试）。问题是

hide

不起作用。我认为声明

child

有问题

也许我必须使用

remove（）

而不是

hide（）

，但在这种情况下，我如何在单击另一个按钮后恢复它

---

你有什么想法吗？

child

不是一个变量，而是一个函数。替换：

var child = row.child;

与

你应该把它修好

---

请参见此处：

子项

不是一个变量，而是一个函数。替换：

var child = row.child;

与

你应该把它修好

看这里：

真有趣

您需要一个自定义筛选器：

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
        var langs = new Set();
        $(".filter").each(function(k, v) {
            if ($(v).is(':checked')) {
                langs.add($(v).attr("id").split("_")[2]);
            }
        });
        var thisId = Object.keys(settings.aIds)[dataIndex].split("_")[2]
        return langs.has(thisId);
    }
);

我对使用按钮很谨慎，因为您可能需要在某个时候显示隐藏的行，所以我将它们替换为复选框：

<label for="btn_id_en">
  <input class="filter" id="btn_id_en" type="checkbox" checked="checked">
  English
  </label>
<label for="btn_id_ru">
  <input class="filter" id="btn_id_ru" type="checkbox" checked="checked">
  Russian
</label>
<label for="btn_id_fr">
  <input class="filter" id="btn_id_fr" type="checkbox" checked="checked">
  French
</label>
<hr>
<table id="example" class="display" cellspacing="0" width="100%">
    <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>

英语
俄语
法语

标题内容1
标题内容2
等1
等2
等3
等4
等5
等6
富1
富2
富3
富4
富5
富6

在中间工作

希望有帮助。

那很有趣

您需要一个自定义筛选器：

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
        var langs = new Set();
        $(".filter").each(function(k, v) {
            if ($(v).is(':checked')) {
                langs.add($(v).attr("id").split("_")[2]);
            }
        });
        var thisId = Object.keys(settings.aIds)[dataIndex].split("_")[2]
        return langs.has(thisId);
    }
);

我对使用按钮很谨慎，因为您可能需要在某个时候显示隐藏的行，所以我将它们替换为复选框：

<label for="btn_id_en">
  <input class="filter" id="btn_id_en" type="checkbox" checked="checked">
  English
  </label>
<label for="btn_id_ru">
  <input class="filter" id="btn_id_ru" type="checkbox" checked="checked">
  Russian
</label>
<label for="btn_id_fr">
  <input class="filter" id="btn_id_fr" type="checkbox" checked="checked">
  French
</label>
<hr>
<table id="example" class="display" cellspacing="0" width="100%">
    <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>

英语
俄语
法语

标题内容1
标题内容2
等1
等2
等3
等4
等5
等6
富1
富2
富3
富4
富5
富6

在中间工作

---

希望对您有所帮助。

如果您认为用例只是有按钮，那么这应该是可行的：

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();
});

---

在这里使用JSFIDLE:

如果您认为用例只是有按钮，那么这应该可以：

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();
});

---

---

在这里使用JSFIDLE:

您能给出表格格式吗？请尝试将child打印到控制台，并检查您得到了什么。@AbhilashRavindranCK我认为那里的HTML表格没有帮助。只有

child.hide（）

和

child.show（）

有问题。这里的表很简单。@AbhilashRavindranCK我试着打印

子项

，但这并没有告诉我：

ƒ（）{var d=b.apply（a，arguments）；s.extend（d，d，c.methodExt）；返回d}

您能给出表格格式吗？请尝试将child打印到控制台，并检查您得到了什么。@AbhilashRavindranCK我认为HTML表格没有帮助。只有

child.hide（）

和

child.show（）

有问题。这里的表很简单。@AbhilashRavindranCK我试着打印

child

，但这并没有告诉我：

ƒ（）{var d=b.apply（a，arguments）；s.extend（d，d，c.methodExt）；返回d}

谢谢你的回答。在这种情况下，我得到一个错误：

无法读取未定义的属性“hide”

。根据文档：

jQuery对象的结果集中包含父行的子行，或者如果尚未为父行设置子行，则未定义子行。

看起来该行不是子行。你有什么想法，如何解决？谢谢你的回答。在这种情况下，我得到一个错误：

无法读取未定义的属性“hide”

。根据文档：

jQuery对象的结果集中包含父行的子行，或者如果尚未为父行设置子行，则未定义子行。

看起来该行不是子行。你有什么想法，怎么想出来的？这个答案更全面，并开辟了许多其他的可能性。忽略我的：）谢谢你的回答，看起来应该差不多完成了任务，但是。。。总条目数不正确。。。它显示了6种语言，但实际上应该只有2种，只翻译成3种语言。也许有能力编辑总条目计数？啊，现在，你看，我想说的是正确的计数取消勾选一个文本

显示4个条目中的1到4个（从6个总条目中筛选出来）

，这是正确的-如果你开始看分页，那么事情可能会变得非常奇怪，特别是如果你干扰了伯爵的话。除非您只想删除可以使用

dom

执行的文本，否则我不会打扰您。或者，您可以有多个表，每种语言一个，可能在选项卡中…用户应该看到一个表，可以更改语言。对于使用，将只有2个条目，只是翻译成3种或更多语言，因此如果它将显示总共6个条目，这将是不正确的。此外，应该只有1个表，而不是3个单独的表。那么

dom

呢？可以做什么？@HappingMouse，你能帮我用按钮而不是复选框来实现吗？永远不会有选择多种语言的能力。这个答案更全面，并开辟了许多其他可能性。忽略我的：）谢谢你的回答，看起来应该差不多完成了任务，但是。。。总条目数不正确。。。它显示为6，但实际上应该是2，jus