Question

我目前有以下代码：


drawCallback: function () {
    let api = this.api();
    // hide columns that add up to 0
    api.columns().every(function (i) {
        let sum = this.data().sum();
        if (sum === 0 && typeof sum === 'number' && i !== 0) {
            api.column(i).visible(0);
        }
    });
}

这有一个问题，但是...对于一个值仅是一个单词的特定列，例如“ Completed”或“ Pending”，似乎this.data().sum();的结果为0而不是NaN。

前两列将显示为NaN，这似乎是因为它们是多词句子，这是这两列之间的唯一区别。

这是数据示例

<td>Foo Bar Jones Jonesy McFoo Department</td>
<td>ABC CityName Location Code XXFOO</td>
<td data-sort="20201002">10/02/2020</td>
<td>Pending</td>
<td>(a variable number of columns with data that is some number that is possibly zero or greater)</td>

是否没有办法用api.columns().every()检查列类型？

Answer 1

我无法使用单字单元格值与多字单元格值重新创建您的特定错误。当我使用parseFloat('x')与parseFloat('x y z')对比时，它们都等于NaN。

（此外，我不知道您是如何实现sum()函数的，因此可以解释您所看到的内容。）

我将使用here中的以下示例作为我的sum()的起点-但要进行修改：

$.fn.dataTable.Api.register( 'column().data().sum()', function () {
    return this.reduce( function (a, b) {
        var x = parseFloat( a ); // removed the 'or' operator: || 0;
        var y = parseFloat( b ); // removed the 'or' operator: || 0;
        return x + y;
    } );
} );

我所做的更改（除去了“或”运算符）确保NaN的值未设置为零，而是保持为NaN-这是专用sum()功能所需要的。

现在，如果我将其与您的DataTable代码一起使用，并根据您提供的内容提供一些测试数据，则可以得到预期的结果：

请注意，日期可能会解析为数字OK，具体取决于数据格式-这可以解释为什么日期列会显示OK（它们之和为正数）。

如果有帮助，这里是完整的独立演示。

在此示例中，最后一列（“ Val 3”）中的所有数据均为零-因此该列是隐藏的。如果存在非零值（总计为零），则该列将保持隐藏状态，并且：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Dept</th>
                <th>Loc</th>
                <th>Date</th>
                <th>Status</th>
                <th>Val 1</th>
                <th>Val 2</th>
                <th>Val 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Foo Bar Jones Jonesy McFoo Department 1</td>
                <td>ABC CityName Location Code XXFOO</td>
                <td data-sort="20200119">19/01/2020</td>
                <td>Active</td>
                <td>1</td>
                <td>1</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Foo Bar Jones Jonesy McFoo Department 2</td>
                <td>DEF CityName Location Code XXFOO</td>
                <td data-sort="20201002">10/02/2020</td>
                <td>Pending</td>
                <td>0</td>
                <td>2</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Foo Bar Jones Jonesy McFoo Department 3</td>
                <td>XYZ CityName Location Code XXFOO</td>
                <td data-sort="20201016">16/02/2020</td>
                <td>Pending</td>
                <td>0</td>
                <td>1</td>
                <td>0</td>
            </tr>
        </tbody>
    </table>

</div>

<script type="text/javascript">

$.fn.dataTable.Api.register( 'column().data().sum()', function () {
  return this.reduce( function (a, b) {
    var x = parseFloat( a );
    var y = parseFloat( b );
    return x + y;
  } );
} );

  $(document).ready(function() {

    var table = $('#example').DataTable( {
      drawCallback: function () {
        let api = this.api();
        // hide columns that add up to 0
        api.columns().every(function (i) {
          let sum = this.data().sum();
          if (sum === 0 && typeof sum === 'number' && i !== 0) {
            api.column(i).visible(0);
          }
        });
      }
    } );

  } );


</script>

</body>
</html>

有没有一种方法可以根据其类型隐藏DataTables列？

1 个答案: