jQuery Datatable列搜索-如何排除0.00?

时间:2018-10-12 07:14:56

标签: javascript jquery regex datatable

我正在使用jQuery插件DataTables(http://datatables.net)进行分页,搜索和过滤。

在这里,我需要显示不包含0.00的 Pecent Salary 行。我尝试了以下正则表达式,但无法正常工作。

'^ / [+-]?((\ 0 +。?\ 0 *)|(。\ 0 +))$'

请帮助我实现这一目标。

demo_link

HTML代码

$(document).ready( function () {
  var table = $('#example').DataTable();
  
  // Filter out rows which do not contain a plus sign
  table.search( '^/[+-]?((\0+\.?\0*)|(\.\0+))$ ', true, false ).draw();
} );
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

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

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

        <tfoot>
          <tr>
            <th>Name</th>
            <th>Pecent</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td>Non Zero row</td>
            <td>0.00</td>
            <td>System + Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>1222</td>
            <td>3.12</td>
          </tr>
          <tr>
            <td>Zero row 1</td>
            <td>12.00</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>0.00</td>
          </tr>
          <tr>
            <td>Zero row 2</td>
            <td>13.43</td>
            <td>Test</td>
            <td>India</td>
            <td>53</td>
            <td>2011/07/25</td>
            <td>0.00</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

如果只想删除最后一个单元格中带有“ 0.00”的行,则可以在创建数据表之前使用标准jQuery方法删除该行。

您当然可以通过更改.find()中的选择器来添加进一步的逻辑,如果您排除“ Pecent”或“ Salary”等于“ 0.00”的行,则示例表将为空,因此我只检查最后一个单元格在这里:

$(function() {

  $('#example')
    .find("tbody td:last-child")
    .filter(function(idx, el) {
      return $(el).text() === "0.00"
    })
    .closest("tr")
    .detach();

  $('#example').DataTable();
  
});
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

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

  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
</head>

<body>
  <div class="container">
    <table id="example" class="display" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Pecent</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>

      <tfoot>
        <tr>
          <th>Name</th>
          <th>Pecent</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>

      <tbody>
        <tr>
          <td>Non Zero row</td>
          <td>0.00</td>
          <td>System + Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>1222</td>
          <td>3.12</td>
        </tr>
        <tr>
          <td>Zero row 1</td>
          <td>12.00</td>
          <td>Director</td>
          <td>Edinburgh</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>0.00</td>
        </tr>
        <tr>
          <td>Zero row 2</td>
          <td>13.43</td>
          <td>Test</td>
          <td>India</td>
          <td>53</td>
          <td>2011/07/25</td>
          <td>0.00</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>