javascript - jQuery，使用 <span> 标记内的特定列值计算数据表(包括所有页面)中的行数。其中 Datatable 有 AJAX 源

Question

我想在提交用户请求之前进行客户端验证。该页面有一个数据表 ("#datatableOne")包含“状态”列(位于#7)，其可能值为 'Unknown', 'Completed', 'Pending' 。此外，这些列值也包含在 '<span>' 内。标签。

<td>
   <span class="label label-Default">Unknown</span>
</td>

还有一件事，该表正在使用 Ajax 加载。

现在我想计算状态为未知的行数。我尝试了以下操作，但它只计算当前显示的“未知”行的计数，而不考虑隐藏在其他页面后面的其余数据表行。我在 (document).ready() 之外执行此操作，

function tableOneRowCount(){
   var rows = $("#datatableOne td:nth-child():contains('Unknown')" ).length;
   alert("Unknown rows :" + rows);
}

还尝试执行以下操作。但这还有更不寻常的行为。它不包括分页行，除非您使它们可见一次。因此，除非我选择第二页，否则第二页将不会包含“未知”行。再次在 (document).ready() 之外的单独函数中执行以下操作

function tableOneRowCount(){
    var table = $('#datatableOne').DataTable();
    var rows= table.rows(':contains("Unknown")').data().length;
    alert("unknown rows : " + rows);
}

我还应该考虑其他方法吗？

谢谢。

Answer 1

我认为你可以这样做，获取所有数据，然后计算平均行包含 Unknown 的数量:

$(document).ready(function() {
  var table = $('#example').DataTable();
  var dataCount = table.rows(':contains("Unknown")').data().length;

  $('#output').text('Number of rows that contain Unknown: ' + dataCount)
  console.log(dataCount);
})

<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>
        <span>Unknown</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>System Architect</td>
    </tr>
        <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>
        <span>Unknown</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>System Architect</td>
    </tr>    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>
        <span>Unknown</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>System Architect</td>
    </tr>    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>
        <span>Unknown</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>System Architect</td>
    </tr>    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>
        <span>Unknown</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>System Architect</td>
    </tr>    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>
        <span>Unknown</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>System Architect</td>
    </tr>    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>
        <span>Unknown</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>System Architect</td>
    </tr>    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>
        <span>Unknown</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>Unknown</span>
      </td>
      <td>System Architect</td>
    </tr>
  </tbody>
</table>
<br>
<div id="output" style="color:red">
</div>