Table Filter
Filter table excluding button text. (currently with an issue)
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<div class="row-fluid span12">
<input type="text" id="searchFilter" placeholder="Type to filter" />
</div>
<div class="span4">
<table class="table table-hover table-striped">
<tbody id="table1">
<tr>
<div class="dv"><td>Running</td></div>
<div class="btndiv"><td><button>Delete</button></td></div>
</tr>
<tr>
<td>Foo</td>
<td><button>Delete</button></td>
</tr>
<tr>
<td>Bar</td>
<td><button>Delete</button></td>
</tr>
<tr>
<td>Fun</td>
<td><button>Delete</button></td>
</tr>
<tr>
<td>In The</td>
<td><button>Delete</button></td>
</tr>
<tr>
<td>Sun</td>
<td><button>Delete</button></td>
</tr>
</tbody>
</table>
</div>
CSS
body {
margin-top: 15px;
}
table {
border: 1px solid #EEEEEE;
}
.dv {
float: left;
width: 40%;
}
.btndiv {
float: right;
width: 40%;
}
button {
float: right;
}
JavaScript
jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
return function( elem ) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
$("#searchFilter").keyup(function () {
var data = this.value.split(" ");
var tbl = $("#table1").find("tr");
if (this.value == "") {
tbl.show();
return;
}
tbl.hide();
tbl.filter(function (i, v) {
var t = $(this);
for (var d = 0; d < data.length; d++) {
if (t.is(":Contains('" + data[d] + "')")) {
return true;
}
}
return false;
}).show();
});