我正在使用jQuery插件DataTables(http://datatables.net)进行分页,搜索和过滤。
在这里,我需要显示不包含0.00的 Pecent 和 Salary 行。我尝试了以下正则表达式,但无法正常工作。
'^ / [+-]?((\ 0 +。?\ 0 *)|(。\ 0 +))$'
请帮助我实现这一目标。
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>
答案 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>