Question

我希望在提交用户请求之前进行客户端验证。该页面包含一个Datatable ("#datatableOne")列，其中包含“状态”列。（＃7），其可能值为'Unknown', 'Completed', 'Pending'。这些列值也包含在'<span>'标记内。

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

还有一件事，这个表是使用Ajax加载的。

现在我想计算未知状态的行数。我尝试了以下方法，但它只计算了“未知”的数量。当前显示的行，不考虑隐藏在其他页面后面的其余数据表行。我在外面做（文档）.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

我认为你可以这样做，获取所有数据，然后计算每行包含的未知数：

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

jQuery，计算在<span>标记内具有特定列值的Datatable（包括所有页面）中的行数。 Datatable具有AJAX源

1 个答案: