column().data() 与正交数据而不是显示？

Question

我正在使用 column().data() to get an array of all values in a column. It works fine on plain-text cells, but from those containing HTML, I'm getting the full HTML. Consider Office in the below example adapted from live.datatables.net。

$(document).ready( function () {
  var table = $('#example').DataTable();
  console.log(table.column(2).data().toArray());
} );

<!DOCTYPE html>
<html>
  <head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="//nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="//nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td data-value="GB"><b>GB</b><i>Edinburgh</i></td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>,120</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td data-value="US"><b>US</b><i>San Francisco</i></td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>,800</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

控制台输出：

[
  "<b>US</b><i>San Francisco</i>",
  "<b>GB</b><i>Edinburgh</i>"
]

但是我该如何调用 return 例如只是 "US" 而不是 "<b>US</b><i>San Francisco</i>"?

根据 /manual/data/orthogonal-data, a similar issue (i.e. having to keep machine-readable value next to a human-friendly display 值) 已经存在过滤和排序功能，并使用 data-* 属性解决。

Consider for example currency data; for display it might be shown formatted with a currency sign and thousand separators, while sorting should happen numerically and searching on the data will accept either form.

所以我想我的问题的解决方案可能是一些 data-value 属性，但我还没有找到任何东西。可行吗？

Answer 1

您当然可以使用 data-* 自定义属性。

但是由于您希望显示的数据显示 HTML 格式，并且您可能不想通过强制该列为 来干扰 sorting/filtering 对国家 ID 进行排序或过滤，我建议您避免使用 pre-defined HTML5 attributes used by DataTables.

相反，您可以通过遍历 DataTable 节点来提取所需的数据：

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office in Country</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td data-country="GB"><b>GB</b><i> Edinburgh</i></td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>0,800</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior "Technical" Author</td>
                <td data-country="US"><b>US</b><i> San Francisco</i></td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>,000</td>
            </tr>
        </tbody>
    </table>

  var table = $('#example').DataTable();

  const countries = Array.from(
    table.column(2).nodes(),
    country => country.getAttribute('data-country')
  );
  
  console.log( countries );

这里我使用 <td data-country="xx">，然后我使用 DataTables API 遍历 table 的节点并将 data-country 属性读入数组：

[ "US", "GB" ]

您可能有多种其他方法可以解决此问题 - 但我认为这是清晰简洁的。

Answer 2

我最终得到的代码更加通用（因此不仅适用于国家/地区，而且支持 innerText），但它完全基于@andrewjames 的回答，这是功劳所在。

var values = Array.from(
    table.column(2).nodes(),
    function(cell) {
        // First, look for the dedicated attribute
        if (cell.hasAttribute('data-filter')) {
            return cell.getAttribute('data-filter');
        }
        // Otherwise, use the inner text of the table cell
        return cell.innerText;
    }
);

column().data() 与正交数据而不是显示？

column().data() with orthogonal data instead of display?

datatables