Question

此问题针对Datatables的{{1}}插件。

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

在HTML表格中，ID如下所示：

fr

但每个条目都有相同的类：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表格如下：

row

有3个按钮，ID如下：

<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_id_en btn_id_ru btn_id_fr

这是JQuery代码：

btn

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(); } }返回每行的正确ID（通过row.id()测试）。问题是console.log(id);无效。我认为声明hide有问题。

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

你有什么想法吗？

Answer 1

这很有趣！

您需要自定义过滤器：

$.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>

使用JSFiddle here。

希望有所帮助。

Answer 2

如果您的用例只是拥有按钮，那么这应该有效：

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/

Answer 3

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

var child = row.child;

带

var child = row.child();

应该修复它。

见这里：https://datatables.net/reference/api/row().child().hide()

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

3 个答案: